Media queries and responsive design

A media query wraps a block of CSS together with a condition. If the condition is true, such as “the viewport is at least 768px wide”, the browser applies that block. If it is false, the block is ignored.

The syntax is `@media type (condition) { ... }`. In modern browsers it is often clearer to use the Media Queries Level 4 range syntax, such as `(width >= 600px)`, instead of the older `(min-width: 600px)`. It reads more like a mathematical comparison. Common conditions include `min-width`, `max-width`, `orientation`, `prefers-color-scheme` and `prefers-reduced-motion`.

Mobile-first means defining the styles for small screens as the base layer, usually without a media query, and then using `@media (min-width: ...)` or `@media (width >= ...)` to add or override styles when more space becomes available. This keeps the code easier to maintain.

If you begin with a desktop layout and then patch it for smaller screens with `max-width`, you often end up overriding too many properties. With a mobile-first flow, complexity is added only where it is needed.

Without the viewport meta tag, many phones simulate a wide viewport, for example 980px, and then scale the page down to fit. Media queries are evaluated against that fake viewport instead of the real device width.

With `` you tell the browser to use the actual device width and avoid that artificial scaling. Then a condition such as `(min-width: 600px)` or `(width >= 600px)` behaves as intended.

For a range such as “tablet only”, the older syntax uses `and`: `(min-width: 600px) and (max-width: 1023px)`. Media Queries Level 4 improves this with range syntax: `(600px = width = 1024px)`. It reads like math and avoids the extra connector. You can also use `not` to invert a condition.