Glossary · Beginner
Media query
A media query conditionally applies CSS or selects resources according to media type and features such as width, motion, contrast, or input capability.
- Published
- Last checked
Definition
A media query is a condition evaluated against the output medium and environment. In CSS, it can activate rules based on viewport dimensions, orientation, input capabilities, color settings, motion preference, forced colors, and other media features.
Responsive use
Width queries should respond to content pressure rather than a device catalog. Start with a useful narrow layout and add arrangements when space supports them. Range syntax and relative units can express boundaries, but the content still needs testing between those boundaries.
User preferences
Queries such as prefers-reduced-motion, prefers-color-scheme, and
forced-colors expose environment preferences or modes. They are inputs to a
usable design, not proof of accessibility. A reduced-motion branch must actually
remove unnecessary movement rather than simply shorten every animation.
Review question
What observable need does each query answer? Drag the viewport slowly, zoom, enlarge default text, rotate the device, connect different input methods, and test preference modes. Confirm the baseline remains complete when a feature is unsupported and that overlapping queries do not create an accidental cascade whose result can only be explained by source order.
Inspect the page when no query matches and when two adjacent queries both match. Boundaries should not leave content without a layout or apply conflicting visibility rules. A query should enhance a complete baseline instead of deciding whether essential information exists.