Media Query
Definition
The syntax is @media (min-width: 768px) { ... }, and the rules inside take effect only while the condition holds. Width is the usual test, in two directions: min-width means "this wide and up", max-width means "this wide and down". Conditions can be combined with and, listed as alternatives with a comma, and negated with not. Width is not the only thing queryable — (orientation: landscape), (prefers-color-scheme: dark), (prefers-reduced-motion: reduce), (hover: none) and (min-resolution: 2dppx) all work, and the user-preference ones are increasingly the more useful. The chosen width in a query is the breakpoint; the query is simply the tool that acts on it.
Why It Matters
Written mobile-first, media queries are additive and easy to reason about: the plain rules describe the narrow layout, and each min-width block adds what a wider screen allows. Written the other way, with a stack of max-width blocks, every screen size has to undo something the previous one did, and the file grows a rule for every combination. The ordering matters for a concrete reason — queries of equal specificity are settled by source order, so a min-width: 768px block placed above a min-width: 480px block loses on a large screen even though it was meant to win. And none of it takes effect at all without a viewport meta tag in the head, which is the first thing to check when a page with perfectly good queries still renders as a shrunken desktop.
How It Works
The browser evaluates each query against the current viewport and re-evaluates whenever it changes — resizing a window flips rules in and out live. A media query adds no specificity of its own: a rule inside one beats an identical rule outside it only because it comes later in the file, which is exactly why mobile-first ordering means going from narrow to wide. Widths are measured in CSS pixels against the layout viewport, not the physical pixels of the screen, so a phone reporting 390px may well have a 1170px panel. Queries can also be attached to a link element with a media attribute, though the stylesheet is still downloaded either way. In developer tools, device mode lets you drag the viewport and watch each breakpoint take hold.
Real-World Example
A course handout published at stats-101.99helpers.site reads well on a laptop and runs off the side of a phone. The stylesheet has sensible rules, but they are wrapped in @media (min-width: 900px) blocks with the desktop layout also written as the default, so a narrow screen gets the wide layout twice over. Rewriting it mobile-first — single column by default, two columns added inside one min-width: 900px block — fixes the phone without changing what a laptop sees.
Common Mistakes
- ✕Ordering min-width blocks largest to smallest — equal-specificity rules are settled by source order, so the smaller breakpoint written later overrides the larger one on wide screens
- ✕Mixing min-width and max-width queries in the same stylesheet — the overlaps are hard to trace, and one element ends up styled by three blocks at once
- ✕Writing queries but omitting the viewport meta tag — a phone then reports a made-up width near 980px and no breakpoint below it ever matches
Related Terms
Breakpoint
A breakpoint is the viewport width at which a layout changes — the number you put in a media query. The query is the mechanism; the breakpoint is the decision about where the design stops working and needs rearranging.
Viewport Units
Viewport units are CSS lengths measured as a percentage of the browser window: 1vw is one per cent of its width and 1vh one per cent of its height. They are how a section is made exactly as tall as the screen, and they behave awkwardly on mobile unless you use the newer dvh, svh and lvh variants.
CSS Grid
CSS Grid is the layout mode for arranging items in two dimensions at once — rows and columns together. You turn it on with display: grid on the parent and define the tracks with grid-template-columns and grid-template-rows.
Dark Mode
Dark mode is a light-on-dark version of a page, shown to visitors whose operating system is set to a dark appearance. In CSS it is detected with the prefers-color-scheme media query, and with custom properties it is usually a handful of lines rather than a second stylesheet.
Responsive Design
Responsive design is building one page that adapts to whatever screen opens it, using flexible layout and CSS media queries, instead of maintaining separate mobile and desktop versions.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →