CSS media queries are conditions written in a stylesheet that apply a block of rules only when the device or viewport matches, such as a minimum width, a print layout or a user preference like reduced motion.
They are one of the core tools covered in the wider guide to front-end web development, and this page explains the syntax, how to choose breakpoints and the patterns that appear in most projects.
How a media query is built
A media query has two kinds of parts. MDN describes the structure this way: “A media query is composed of an optional media type and any number of media feature expressions”. The type says what kind of output the rules are for, and the feature expressions test a specific characteristic of the device or environment. Each feature expression sits inside its own parentheses, and the whole condition follows the @media keyword in the stylesheet, with the affected rules inside curly braces.
Media types used to be a long list, but the list shrank. According to MDN, “most of the originally-defined media types were deprecated, with just screen , print , and all remaining”. In practice that means a query either targets screens, targets printers (and print previews), or applies to everything. Because the type is optional, many queries skip it and go straight to a feature in parentheses.
Features are where the real work happens. A width test asks about the viewport, an orientation test asks whether the viewport is taller than it is wide, and a hover test asks about the primary input device. Features that take a number can be written with a min- or max- prefix, so “min-width” means “this wide or wider” and “max-width” means “this wide or narrower”. If a query tests a feature the device does not have, the expression is simply false and the rules inside do not apply.
Logical operators and range syntax
Conditions can be combined. The and operator requires every part to be true, a comma between queries means “any of these”, and not flips the meaning of a single query. MDN states that “The not keyword inverts the meaning of a single media query”, so a rule wrapped in a not-print query applies to everything except printed output.
The only keyword has a history worth knowing. MDN explains that “the only operator was used to prevent older browsers from applying the styles without evaluating the media feature expressions but it has no effect in modern browsers”. Older stylesheets still contain it, and it is harmless, but new code does not need it.
The newer range syntax replaces the prefixed form with comparison operators. As MDN puts it, “With media query range features, you can either use the inclusive min- and max- prefixes or the more concise range syntax operators <= and >= .” Instead of writing a min-width and a max-width test joined by “and”, a single expression can place the width between two values, which reads closer to ordinary maths. Both forms mean the same thing, so a team can pick one and stay consistent across a codebase.
Choosing breakpoints
A breakpoint is the viewport width at which the layout changes. The most common mistake is to pick breakpoints from a list of popular phone and tablet sizes. The web.dev guidance on responsive design says the opposite: “Don’t define breakpoints based on device classes, or any product, brand name, or operating system.” Device sizes change every year, and a layout tied to one model of phone breaks on the next.
The same article recommends working from the content outward: “Design the content to fit on a small screen size first, then expand the screen until a breakpoint becomes necessary.” This is the mobile-first approach. The base styles describe the narrow layout with no query at all, and min-width queries add complexity as space allows. Wide layouts then become additions rather than overrides, and small devices download and parse fewer rules they will never use.
Content-driven breakpoints also tend to be fewer. When a line of text becomes uncomfortably long, or a row of cards starts to look sparse, that is the moment to add a rule. Major breakpoints cover structural changes such as moving from one column to two, while minor adjustments, such as slightly larger padding, can be handled with fluid units so they need no query at all.
The viewport meta tag that makes queries work
Width-based queries depend on the browser reporting a sensible viewport width. Phones render pages in a virtual wide viewport unless the page opts out. The web.dev article explains that “Using the meta viewport value width=device-width tells the page to match the screen’s width in device-independent pixels (DIP)”. Without that tag in the head of the document, a phone can report a desktop-sized width, and a mobile-first stylesheet will appear to ignore its own breakpoints.
The same meta element accepts zoom controls, and these deserve care. MDN carries a direct warning: “Disabling zooming capabilities by setting user-scalable to a value of no prevents people experiencing low vision conditions from being able to read and understand page content.” Leave scaling enabled. It is a question of web accessibility as much as layout, because pinch-zoom is how many readers enlarge small text.
Common patterns beyond width
Width is only one of many features. The table below lists the ones that appear most often in real stylesheets, taken from MDN’s list of media features.
| Feature | What it tests | Typical use |
|---|---|---|
| width | Viewport width | Switching a layout between narrow and wide arrangements |
| orientation | Landscape or portrait viewport | Adjusting hero areas or galleries on rotation |
| hover | Whether the primary input can hover | Showing hover effects only where a pointer can trigger them |
| prefers-color-scheme | Light or dark system setting | Offering a dark theme |
| prefers-reduced-motion | Reduced-motion setting | Removing or shortening animation |
| resolution | Pixel density of the display | Serving sharper images on dense screens |
The feature names above come from the list in the MDN guide to using media queries.
The hover test solves a common touch-screen problem. MDN says “the hover feature allows a query to check whether the device supports hovering over elements”, so menus and tooltips that rely on a pointer resting over them can be restricted to devices where that is possible, while touch users get a tap-based alternative.
The reduced-motion feature is the pattern with the biggest effect on users. MDN describes it as a feature “used to detect if a user has enabled a setting on their device to minimize the amount of non-essential motion.” Large scaling or panning animations can trigger discomfort for people with vestibular conditions, so wrapping decorative animation in a query that respects the setting is a small change with real benefit. MDN’s page on prefers-reduced-motion lists the feature as widely available, noting “It’s been available across browsers since January 2020.” That is long enough ago that it needs no fallback in most projects.
Print styles and layout tools together
The print type is the most overlooked pattern. A print query can hide navigation, switch backgrounds to white and let links show their addresses, so a printed or saved page stays readable.
Media queries also pair with modern layout. A grid or flexible row can handle most of the adaptation on its own, and queries then step in only where the structure must change. The comparison in the guide to flexbox vs grid helps decide which tool should carry the main layout, leaving queries for the few places where a redesign at a certain width is genuinely needed.
One performance detail helps when queries are used on linked stylesheets. MDN notes that “A style sheet with a media query attached to its <link> tag will still download even if the query returns false”. The download is given lower priority, but it still happens, so splitting a stylesheet by media does not remove it from the network. It is a way to avoid blocking rendering, not a way to avoid transfer.
Frequently asked questions
Should media queries use min-width or max-width?
Mobile-first stylesheets lean on min-width, since the base rules serve the narrow layout and queries add to them as space grows. Max-width is useful for desktop-first code and for fixing one range, but mixing both styles in a single file makes the cascade harder to follow.
Do I still need the only keyword?
No. MDN says it has no effect in modern browsers. It remains in older code where it was written to protect browsers that lacked media query support.
What is the difference between the screen and all media types?
The screen type applies to screen output only, while all applies to every kind of output, including print. When a query omits the type, it behaves as all, so adding screen is only needed when the rules must not affect printing.
Why do my breakpoints seem ignored on a phone?
The usual cause is a missing viewport meta tag. Without it, a phone treats the page as a wide desktop layout and reports a width above every mobile breakpoint.
