Media query

Device dimensions change constantly, and a breakpoint list built from this year's popular handsets is wrong next year.

The layout, by contrast, has a width at which a column becomes too narrow to read or a grid has room for another item. That width does not move.

So the method is to widen the window until something looks wrong and put a breakpoint there, which produces fewer breakpoints in unfamiliar places.

It also produces a layout that behaves sensibly at sizes nobody anticipated, including window sizes on a desktop.

Fewer breakpoints is generally better: each one is a state to design, build and test.

Writing base styles for the narrow case and adding complexity at wider widths means the simplest devices download and apply the least CSS.

The reverse — desktop styles overridden downward — means a phone parses rules it will immediately override.

It also tends to produce better narrow layouts, because the narrow case was designed rather than derived by removal.

The distinction is a convention rather than a rule, and its practical benefit is largest on the sites with the most CSS.

A reduced-motion preference, which some people set because animation causes them genuine physical discomfort. Honouring it is a WCAG consideration rather than a nicety.

A contrast preference, which asks for stronger separation between foreground and background.

A colour-scheme preference, which is a comfort setting for most people and a readability requirement for some.

These are reported by the operating system through the browser, so respecting them costs a query and no interface of your own.

A site with an animation that cannot be turned off is excluding people who cannot watch it, which is a narrower group than it sounds and a real one.

A media query tests the viewport, which is a poor proxy for how much room a component actually has.

A component in a narrow sidebar on a wide screen gets the wide-screen styles and does not fit, which is the recurring frustration with viewport-based responsiveness.

Container queries test the component's own container instead, which lets a component be responsive independently of where it is placed.

They do not replace media queries — page-level layout and user preferences are still viewport and system concerns.

Responsive layout signals present in the served markup and styles are reported, alongside the viewport declaration that makes any of them effective.

Rendering at a phone viewport measures content width, overflow, text size and touch targets under the styles that apply there.

A declaration disabling zoom is reported, since it removes the mechanism people with low vision rely on.

Whether preference queries are honoured is not exercised: the scan does not set a preference and observe the difference.