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 →
🔗 Related: Creating websites with prefers-reduced-data
🧑🏫 Kilian also covers nesting of CSS Media Queries, something I only recently discovered was possible.