The old and the new media queries
March 14, 2025
In CSS, media queries are the mechanism that allows you to style parts of a document based on certain properties of the media. They’re typically used for adapting styles based on the viewport’s width.
The traditional syntax of a media query is composed of two pieces, separated by a colon:
- a “media feature” (e.g.
max-width) - a value (e.g.
800px)
@media (max-width: 800px) {
/* ... */
}Although somewhat cryptically, this is saying: “only apply the following styles when the viewport’s width is less than or equal to 800px.”
You can even combine feature/value pairs to create more specific queries.
@media (max-width: 800px) and (min-width: 400px) {
/* ... */
}Now, this is saying: “only apply the following styles when the viewport’s width is less than or equal to 800px AND more than or equal to 400px.”
As you might be thinking, this syntax can get quite confusing though… What the heck does max-width even mean? Some days, I think it means “up to x width”. Other days, I think it means “x width and up”.
In other words, my mental model is faulty every odd day.
For clarity’s sake, an alternative syntax that’s more readable was added to CSS. It uses the typical logical operators you’d find in a programming language like JavaScript or PHP.
@media (width <= 800px) {
/* ... */
}Unlike a traditional media query, this one very clearly states: “only apply the following styles when the viewport’s width is less than or equal to 800px.” It couldn’t get any clearer.
And once again, you can combine feature/value pairs, but this time using logical operators.
@media (width <= 800px) and (width >= 400px) {
/* ... */
}Perhaps a bit bewilderingly, the following syntax is also completely valid. But, I much prefer the clarity of the long-form syntax.
@media (400px <= width <= 800px) {
/* ... */
}