Did you know there is a media query for inverted colors? Or one for saving data?
Media queries are what make modern responsive design possible.
With them you can set different styling based on things like a users screen size, device capabilities or user preferences.
But how do they work, which ones are there and which ones should you use?
I set out to write the ultimate guide to media queries, going over every little detail, like which media types there are, all the media queries you should use now, you will use in the future and the ones you should no longer use.
Here's the complete guide to CSS media queries
It's as much a reference as an opinionated description of how to best use them. It also has many clever tips, like this cheap dark mode that will get you a good looking site in just a few lines of code:
@media (prefers-color-scheme: dark) {
:root {
background: #111;
filter: invert(1) hue-rotate(180deg);
}
img,
video {
filter: invert(1) hue-rotate(180deg);
}
}
If you wanna understand how it works, head on over to the complete guide to CSS media queries
Top comments (2)
Hi there, we encourage authors to share their entire posts here on DEV, rather than mostly pointing to an external link. Doing so helps ensure that readers don’t have to jump around to too many different pages, and it helps focus the conversation right here in the comments section.
If you choose to do so, you also have the option to add a canonical URL directly to your post.
I usually do! (check my profile) but somehow this felt to large/long/like it didn't fit the dev.to format? It's more a reference than an article or post.