CSS media query range syntax (part of Media Queries Level 4) offers a cleaner alternative to min-width/max-width by using comparison operators like <=, >, and chained ranges (300px <= width <= 500px). The traditional approach causes a subtle bug when two queries share the same breakpoint value, hiding both elements simultaneously. Range syntax eliminates this by making the logic explicit and readable. It has been well-supported across browsers since March 2023 and also works with container queries by swapping @media for @container.
Table of contents
IntroductionThe problem with media queriesMeet media query rangesWhy range media queries?Not only for media queriesConclusionFurther readingSort: