Media Queries Level 4: синтаксис диапазонов `(width >= 768px)`
Читаемые брейкпоинты без «max-width минус один пиксель» и меньше ошибок в Sass.
Синтаксис диапазонов `(width >= 48rem)` заменяет классические `min-width` / `max-width` цепочки и легче читается в code review.
Комбинируйте с `rem` и container queries: media — для shell/layout, container — для карточек.
- Media Queries Level 4 — W3C — Спецификация range context.
- @media — MDN — Современный синтаксис в примерах.
Миграция
PostCSS и современные браузеры поддерживают range; для legacy оставьте один fallback-файл, а не дублируйте все правила.
Зафиксируйте брейкпоинты в design tokens, чтобы дизайн и вёрстка ссылались на одни числа.