Media query range syntax
The range syntax of CSS media queries allows you to use mathematical comparison operators such as <, >, <=, and >= to define a range of values for a media query. For example, (400px < width < 1000px) returns true if the viewport width is between 400px and 1000px.
Overview
The range syntax of CSS media queries allows you to use mathematical comparison operators such as <, >, <=, and >= to define a range of values for a media query. For example, (400px < width < 1000px) returns true if the viewport width is between 400px and 1000px.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.at-rules.media.range_syntax | 104 | 104 | 102 | 16.4 | 104 | 16.4 |
- This browser only partially implements this feature
- This feature was removed in a later browser version (102)
- Only supports range notations where the feature name comes before any value `(width > 500px)`
Syntax
/* Media query range syntax */
/* See MDN Web Docs for details */Use cases
Adaptive styling
Use Media query range syntax to tailor layout or presentation to device features and user settings.
Progressive enhancement
Keep the default experience solid, then layer in device-specific or preference-aware improvements.
Cautions
- Do not rely on a media condition as the only path to essential functionality.
- Document the breakpoint or environment strategy so conditions stay consistent across the codebase.
Accessibility
- Media-query adaptations should preserve keyboard access, reading order, and touch usability.
- Preference-aware styling should enhance accessibility rather than replace baseline accessible defaults.
Related links
Powered by web-features