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.