Responsive design with media queries

Media queries apply CSS styles depending on a device's media type or features such as viewport width, orientation, aspect ratio, resolution, and user preferences like preferring reduced motion. Use them with the @media at-rule for conditional styling, on HTML elements such as link and style via the media attribute, or from JavaScript with Window.matchMedia(). A query is an optional media type — all, screen, or print — combined with media feature expressions using the logical operators not, and, and only; syntax is case-insensitive and each feature expression requires parentheses. Discrete features such as orientation accept keyword values, while range features such as width support the min- and max- prefixes or the inclusive <= and >= range syntax operators, with < and > excluding the comparison value. A query computes true only when the media type matches and every feature expression is true; unknown media types are always false, and a stylesheet attached to a non-matching query still downloads, at lower priority, applying only if the result changes to true. Scope: CSS media queries. Reviewed October 4, 2026.