This content originally appeared on Trys Mudford's Blog and was authored by Trys Mudford's Blog
A friend shared this tip the other day and it was too useful not to reshare. If you’re a mobile-up kind of developer, it’s easy to forget that max-width media queries are “less than or equal to” by default. It can play havoc with your nice round numbers:
@media (min-width: 60em) {
/* above and including 60em */
}
@media (max-width: 59.9375em) {
/* below 60em, but not including 60em exactly */
}
If you want to tidy that up, and continue to support <= Safari 16.3, you can use a query like this:
@media (max-width: 60em) and (not (width: 60em)) {
/* below 60em, but not including 60em exactly */
}
However, if you’re bought into range queries, it all becomes much, much simpler:
@media (width < 60em) {}
This content originally appeared on Trys Mudford's Blog and was authored by Trys Mudford's Blog
Trys Mudford's Blog | Sciencx (2025-07-24T00:00:00+00:00) Better max-width queries. Retrieved from https://www.scien.cx/2025/07/24/better-max-width-queries/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.