Responsive design — media queries and mobile-first

A media query wraps a block of CSS in a condition — most commonly a viewport-width threshold — that the browser continuously re-evaluates as the window resizes, applying or removing the wrapped rules live, with no JavaScript or page reload involved. min-width: 768px means "apply this when the viewport is 768px or wider" — the condition is about a lower bound, not an exact match, which is the detail the next section builds directly on.

"Mobile-first" means the unwrapped, default CSS is the small-screen layout, and each min-width media query only adds or overrides styles for progressively larger screens — never the reverse. Because min-width queries are additive going up, each breakpoint only needs to specify what's different from the screen size below it, not restate the whole layout — a 1200px rule doesn't need to repeat display: flex, since that's already active from the 768px breakpoint below it and stays active unless something later overrides it.

Writing the desktop layout as the default and using max-width queries to override it downward means every mobile-specific override has to explicitly undo whatever the desktop styles set — here, both display and gap need resetting, not just the one property that's actually different in spirit. This isn't wrong, exactly, but mobile-first with min-width tends to produce less CSS overall in practice, since additive overrides rarely need to fight the base styles the way subtractive ones do — one real, practical reason mobile-first became the more common default recommendation.

Without this tag, mobile browsers render the page at a fixed desktop-width virtual viewport (historically 980px) and then zoom the whole thing out to fit the screen — meaning every media query breakpoint is evaluated against that fake 980px width, not the phone's actual screen width, so a 768px breakpoint would never even trigger on a real phone. This single <meta> tag tells the browser to use the device's actual width as the viewport instead, which is a genuine prerequisite for any of the media queries above to behave the way they're written to — a real, common source of "my responsive styles aren't working on mobile" bugs when this tag is missing.