Media query ranges without min-width and max-width
Defining a range of viewport widths required two separate media features: min-width and max-width. Media Queries Level 4 introduces range syntax using standard comparison operators, making ranges possible in a single expression.
2 .card { grid-template-columns: 1fr 1fr; }
3}
2 .card { grid-template-columns: 1fr 1fr; }
3}
Browser Support for Css media range syntax
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2023.
Compound ranges in one expression
A between-range like 600px to 1200px takes one expression instead of two media features joined with and.
Familiar comparison operators
Uses <, <=, >, >= instead of min-/max- prefixes. The direction reads naturally: 600px <= width means width is at least 600px.
Works for all range features
Range syntax works for width, height, aspect-ratio, resolution, and any other range-type media feature.
How it works
The old min-width and max-width media features work but read backwards — min-width: 600px means the viewport is at least 600px wide. Defining a range required two features connected with and, which gets verbose for common breakpoint patterns.
Media Queries Level 4 range syntax uses standard comparison operators. (600px <= width <= 1200px) is a compound range in a single expression and reads in the same direction as the intent. Both < (exclusive) and <= (inclusive) are available for precise boundary control.