What is a media query in CSS?

Glossary · Updated October 23, 2026 · Also called: @media, CSS media queries

Definition A media query is a CSS condition, written with the @media rule, that applies a block of styles only when the device or browser matches it: for example a viewport at least 600 px wide, a dark color scheme, a touch screen or a preference for reduced motion. Media queries are the core tool of responsive web design and are defined in the W3C Media Queries Level 4 specification.

Related guide: Responsive Breakpoints in 2026: Which Widths to Design For

How do media queries work?

A media query has an optional media type (screen, print or all) and one or more media features in parentheses, combined with and, commas (or) and not. The browser re-evaluates them whenever conditions change, such as when a phone rotates or the user switches to dark mode, and applies the matching rules immediately.

Media features useful on mobile:

• width with min-width and max-width: the viewport width, the basis of breakpoints;
• orientation: portrait or landscape;
• hover and pointer: whether the main input can hover and how precise it is (pointer: coarse for touch);
• prefers-color-scheme: light or dark, see prefers-color-scheme;
• prefers-reduced-motion: the user asked for less animation;
• resolution: screen density, related to device pixel ratio.

Example

/* Two columns on wider screens */
@media (min-width: 600px) { .grid { grid-template-columns: 1fr 1fr; } }

/* Range syntax (Media Queries Level 4) */
@media (600px <= width < 1024px) { .sidebar { display: none; } }

/* Bigger tap areas on touch screens */
@media (pointer: coarse) { .toolbar button { min-height: 44px; } }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) { * { animation: none; } }

The range syntax works in Chrome 104, Firefox 63 and Safari 16.4 and later; for older browsers, use min-width and max-width. You can also test a media query from JavaScript with window.matchMedia('(min-width: 600px)').

Common mistakes

• Querying device names. There is no reliable "iPhone" query; widths overlap between brands. Query the width the layout needs.
• Overlapping ranges. max-width: 768px and min-width: 768px both match at exactly 768 px. Mobile-first stylesheets that only use min-width avoid this.
• Missing viewport tag. Without the viewport meta tag, a phone reports a 980 px viewport and phone queries never match.
• Using hover for essential content. Phones can't hover. Wrap hover effects in @media (hover: hover) and make menus open on tap.

MobileCheck doesn't read your media queries; it shows what they produce on each real device and in dark mode, and flags the problems that result.

Related terms

• BreakpointA breakpoint is a viewport width at which a responsive layout changes, set with a media query, for example from one column to two at 600 px.
• Responsive web design (RWD)Responsive web design is building one page whose layout adapts to any screen width with fluid grids, flexible images and media queries.
• Mobile-firstMobile-first means designing and writing CSS for small screens first, then adding wider layouts with min-width media queries.
• prefers-color-schemeprefers-color-scheme is a CSS media feature that reports whether the user chose a light or dark theme, so a site can switch to dark colors.

Guides and tools

• Responsive Breakpoints in 2026: Which Widths to Design For
• CSS media query generator

Sources

1. MDN: Using media queries
2. W3C: Media Queries Level 4

All 27 glossary terms, A to Z