TLDR Dev · ARTICLES & TUTORIALS

MEDIA QUERIES RANGE SYNTAX

ishadeed.com5 min read

Summary from the TLDR Dev newsletter

The range comparison syntax for media queries (e.g., width <= 300px) is recommended to replace min-width/max-width because the inclusive nature of the latter can cause bugs when breakpoints collide. This modern syntax avoids these collision issues, expresses intent more clearly, collapses two-sided ranges into a single expression, and is fully compatible with @container queries.