The complete guide to CSS media queries

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