Media query range syntax
Range syntax makes media queries easier to read by expressing comparisons directly with operators such as <, <=, and >=. It improves clarity for breakpoint logic.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
range syntax | 104 | 104 | 102 | 16.4 | 104 | 16.4 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Limitation
- This browser only partially implements this feature
Removed
- This feature was removed in a later browser version (102)
Implementation note
- Only supports range notations where the feature name comes before any value `(width > 500px)`
Syntax
HTML
/* Traditional syntax */
@media (min-width: 768px) { /* ... */ }
/* Range syntax */
@media (width >= 768px) {
.container { max-width: 1200px; }
}
/* Range specification */
@media (768px <= width <= 1024px) {
.sidebar { display: none; }
}
/* Can also be used with height */
@media (height >= 600px) {
.hero { min-height: 100vh; }
}Live demo
Use cases
-
Readable breakpoint rules
Express width or height ranges more clearly than chained min- and max- prefixes.
-
Maintainable responsive CSS
Reduce cognitive load when teams review or revise breakpoint conditions later.
Cautions
- Syntax clarity helps, but overlapping range logic can still create hard-to-debug style collisions.
- Use a documented breakpoint system so range expressions stay consistent across the codebase.
Accessibility
- Clear breakpoint logic supports more predictable zoom and reflow behavior.
- Responsive changes should continue to preserve content order and input usability.