Combine media queries or write them where it suits?
I'm a fan of writing media queries underneath the original 'normal' definition. For example, let's say I want to change the width of a couple of elements, at different places in the style sheet, depending upon the viewport width I would do this:
.thing { width: 50%; } @media screen and (min-width: 30rem) { .thing { width: 75%; } } /* A few more styles would go between them */ .thing2 { width: 65%; } @media screen and (min-width: 30rem) { .thing2 { width: 75%; } }
This seems like lunacy at first. We have two media queries that both relate to when the screen has a minimum width of 30rem. Surely repeating the same @media
declaration is overly verbose and wasteful? Shouldn't I be advocating grouping ...
Get Responsive Web Design with HTML5 and CSS3 - Second Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.