The complete guide to CSS media queries

Last summer Kilian Valkhof did a wonderful write-up on the Polypane blog covering CSS Media Queries.

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?

Good for beginners, but seasoned developers might also want to take a look at the “New notations in Media query levels 4 and 5” section, especially the part about Media Query Ranges:

/* old notation */
@media (min-width: 300px) and (max-width: 750px) {
}

/* new notation */
@media (300px <= width <= 750px) {
}

This is gonna be awesome! 😎

The complete guide to CSS media queries →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.