In a CSS media query, how does the range syntax such as @media (width >= 40rem) differ from @media (min-width: 40rem), and what problem does it solve?

## Two spellings of one comparison Media Queries Level 4 added a comparison syntax for features that have an ordered range of values. These pairs are equivalent: ```css @media (min-width: 40rem) { } @media (width >= 40rem) { } @media (max-height: 30rem) { } @media (height <= 30rem) { } ``` Nothing about matching changes. The `min-`/`max-` prefixed forms are not deprecated and continue to work. What you gain is readability — `width >= 40rem` reads as the comparison it is, whereas `min-width` is a small puzzle every time, because it describes the *minimum the viewport must have* rather than a maximum bound on the rule. ## The inclusivity problem The substantive difference is that `min-` and `max-` are *always inclusive*: `min-width: 40rem` means width ≥ 40rem and `max-width: 40rem` means width ≤ 40rem. Write the obvious complementary pair and both match at exactly 40rem: ```css @media (max-width: 40rem) { .card { display: block; } } @media (min-width: 40rem) { .card { display: flex; } } ``` At precisely 40rem, both blocks apply and the later one silently wins. The historical workaround is to back one bound off by a hair — `max-width: 767.98px` next to `min-width: 768px` — which most component libraries still ship. The `.98` is not superstition: viewport widths are not necessarily integers. Page zoom, an OS display scale factor, and fractional device pixel ratios all produce widths like `767.5px`, and a `767px`/`768px` pair leaves those widths matching *neither* rule, producing a narrow band where the element is unstyled. Range syntax removes the whole class of problem, because it has strict operators: ```css @media (width < 48rem) { .card { display: block; } } @media (width >= 48rem) { .card { display: flex; } } ``` Every real number is in exactly one of those two sets. No overlap, no gap, no magic decimal. ## Two-sided ranges The syntax also allows a bound on both sides in a single query, with the feature name in the middle: ```css @media (30rem <= width < 60rem) { } ``` The pre-Level-4 spelling needs two conditions joined with `and`, plus the same off-by-a-hair care: `@media (min-width: 30rem) and (max-width: 59.99rem)`. ## Which features accept it Only *range-type* features — ones whose values are ordered. In practice: `width`, `height`, `inline-size`, `block-size`, `aspect-ratio`, `resolution`, `color`, `color-index`, `monochrome`. Discrete features have no ordering, so `@media (orientation >= landscape)` or `@media (hover >= hover)` are simply invalid, and an invalid query never matches — the whole block is dropped silently, which is a nasty way to lose a rule. `resolution` is worth remembering as a range feature, since it is the modern way to target high-density displays: `@media (resolution >= 2dppx)`. The old `-webkit-min-device-pixel-ratio` you still see in legacy stylesheets is a vendor-prefixed relic of the same idea. ## Units inside a media query A detail that surprises people: relative units in a media query resolve against the *initial* value of `font-size`, not against whatever the page set on the root element. So if a stylesheet does `html { font-size: 62.5%; }` to make `1rem` equal `10px` in the document, the breakpoints do **not** shift — `40rem` in the query is still 40 × the browser's default font size, typically 640px. It does, however, track the *user's* browser font-size preference, which is precisely why em/rem breakpoints are preferred over px ones: a user who raises their default text size gets the smaller-viewport layout at a proportionally larger viewport, which is usually the layout they need. ## Support and fallbacks Range syntax reached all the major engines in 2022–2023 (Firefox 102, Chrome 104, Safari 16.4) and is Baseline since then. Older browsers do not understand the query, treat it as invalid, and skip the entire block — a hard failure, not a graceful one. That is a non-issue for most projects today, and where it is not, build tooling such as Lightning CSS or PostCSS can down-compile range queries to the `min-`/`max-` forms automatically.