Media query range syntax expresses viewport conditions with comparison operators, replacing verbose min-width and max-width combinations with notation that reads like a range. section 7.2.1
Set an inclusive viewport range
Use @media (800px <= width <= 1200px) when a rule should apply from 800px through 1200px. Exclusive operators omit the equality sign, as in @media (800px < width < 1200px). section 7.2.1
@media (480px <= width < 1200px) { ... }
@media (800px < height) { ... }
@media (width = 1600px) { ... }
Compare bounded, one-sided, and exact-width media query expressions. section 7.2.1
Use the syntax when:
- A single expression should describe both lower and upper viewport bounds. section 7.2.1
- Adjacent breakpoints must avoid overlapping at an exact size; choose < or <= deliberately. section 7.2.1
- Check current browser support because the syntax remains relatively new. section 7.2.1
