Responsive Design (Media Queries)

A @media rule applies its styles only when a condition is met — most often a screen width. This is how a page rearranges itself for phones vs. desktops.

Example: mobile-first responsive styling

.box {
  background: #2f7dff; /* the default, for small screens */
  padding: 12px;
}

@media (min-width: 768px) {
  .box {
    background: #ff7a2f; /* overridden once the screen is wide enough */
    padding: 24px;
  }
}

The common convention — used above — is mobile-first: write your default styles for the smallest screen first, then use @media (min-width: ...) to progressively add or override styles as the screen gets wider. This tends to produce simpler CSS than the reverse (desktop-first, using max-width to strip things away), since you're always adding complexity as space allows rather than trying to cram a complex desktop layout back down.

Common breakpoints worth knowing, not memorizing exactly

There's no single "correct" set of screen-width breakpoints — real projects pick values based on where their own design actually starts looking cramped, commonly somewhere near 480px (large phones), 768px (tablets), and 1024px (small laptops). Treat these as a starting point to test against, not a rule to follow blindly.