loading...
Cover image for The complete guide to CSS media queries
Polypane

The complete guide to CSS media queries

kilianvalkhof profile image Kilian Valkhof ・1 min read

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

Posted on by:

kilianvalkhof profile

Kilian Valkhof

@kilianvalkhof

Building https://polypane.app to help every developer and designer build better websites, faster.

Polypane

A cross-platform developer browser to develop, debug and test sites and apps twice as fast. Make your sites and apps work everywhere and for everyone.

Discussion

markdown guide
 

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.