How do you media query? Here at Rocket Pop, it’s a question that gets its fair share of debate. When I first started building responsive CSS using media queries, Apple’s iPhone was the device that initially came to mind. Accordingly, I targeted my media queries and stylesheets to those devices:
You see three examples here of grouping styles together based on device targeting either through size alone or size and orientation. There is a sizable benefit to be gained by this type of organization. If a user reports an issue related to styling on a certain device, it’s pretty easy to figure out where the culprit lies.
However, there’s a definite performance hit here. Each of these stylesheets requires a separate HTTP request to download it. And, more importantly, browsers will download these stylesheets whether they’re needed or not. In short, while this might be a good practice to employ in development, it’s a terrible practice to employ in a production site, especially if you’re working on a site that expects to receive a significant amount of traffic.
As the web became more cognizant of the performance penalty with extra HTTP headers, many developers began including their media queries in main stylesheet at the bottom:
Many still include their media queries this way and there’s no performance hit to doing it this way. However, recently I began intermingling media queries with my base styles. Here’s a pretty detailed example from a recent build we did for RichTech.
I’ve removed much of the decorative SASS so we can focus our media queries and some pitfalls I ran across and how to work around them.
Lines 1 through 8 establish our base size within our larger grid. Our menu is fixed to the bottom of the screen, spans the full width of our grid, and is a height of 54 pixels.
Lines 7 through 38 handle the structure of our unordered list. You will notice the first thing we build is a mixin (if you’re not familiar with SASS, mixins serve similar to PHP functions). Because RichTech’s audience includes a sizable portion of IE8 users, and IE8 does not understand media queries, we build the base structure of our menu as a mixin so we can target IE8 users directly via Modernizr’s .lt-ie9 class. We then target everyone else using a standard min-width media query.
If you are writing CSS and all your styles are included in a media query, IE8 will not render your page as you intended.
On line 22 you will see we add additional padding to our menu items for viewers with screens wider than 1095 pixels.
The last two items control the menu structure for user’s with narrow browser viewports. Rather than continuing to shrink font-sizes and reduce space, we switch from a horizontal menu to a vertical menu and introduce a show/hide trigger, which you can see below.
The more I develop this way, the more I like it. Why? Because I know EXACTLY where to find the code for a container if something is broken or changes need to be made.
Moreover, I can more quickly determine the most efficient way to make a change. If I need to change all viewport sizes, that code is likely a few lines above. If I need a new viewport query, I can insert it a few lines below where I am.
For me, I have found that I can wrap my brain around what code needs to be changed and make the changes in a quicker manner if my code is grouped by the container it affects rather than the screen size it affects.