Using Ems In Media Queries For Proportional Layouts

I admit that I’ve never been a fan of ems, and have avoided using them for as long as possible. However after an interesting conversation with a Twitter friend of mine, Matt Hill, he convinced me to try using not only ems for font sizes, but for media queries as well. It took a bit of back and forth before I could actually understand both the purpose of this and how it actually worked.

I’ve always used pixels for media queries, and inserted a new MQ every time the layout of the site began to break down or become uncomfortable to use or read (which means my sites have always been device independent). This meant though, that the layout stayed the same regardless if the user had zoomed in or had increased the default font size from something other than 16px. If the user had gone from 16 to 30 base pixels, all of those large fonts because crowded and jammed within the original layout.

Using ems instead of pixels for MQs means we can keep the site proportional – a change in the base font size means a change in the media query size as well. This helps prevent text jams and unsightly layouts, and allows for a better flow of content.

For example, here’s a site I’ve recently been working on – at a normal, large desktop view:

default

The baseline font size is set to 1em (16px) and all of the fonts scale appropriately. If we were to increase our default font size to ‘very large’ and used set pixel sizes for the media query, it would look something close to this:

pixels

The site isn’t totally unusable – but it’s definitely not ideal. The menu items become so large, they get hidden behind the logo and the categories in the hero are breaking out of layout. The content itself is now much larger, but still in two columns, which could become difficult to read as line widths become shorter and text becomes larger.

Replacing the pixel media queries with ems instead, produces something a lot more usable:

ems

The site has now snapped to the appropriate media query, as if the actual width of the site had changed. The navigation menu is made smaller and is now not hidden by the logo. The categories are now 100% of the width of the hero, and the content is now in single column instead of two: making it a lot easier to read and digest.

This also works well when using the zoom feature instead of changing text size. You can zoom in as far as the full mobile layout, which makes it that much easier to read:

screenshot_396

So what does an em media query look like? Exactly the same as the pixel version! Let’s say we want to insert a breakpoint at 600px. Just like a font size, we simply divide our target width with our baseline (16px):

600px / 16px = 37.5em

And the resultant media query looks like:

 
/*MQ MAX-WIDTH 600*/
 
@media only screen and (max-width: 37.5em) {
 
 
}

Although using ems was a bit more math (and I abhor math), and I had to change the way I coded a bit (not applying font sizes to parent containers, but to the exact elements themselves), I’ll still stick with this method for future websites. It’s a lot more user friendly and for people with bad eyesight (like me), it’s a lifeline. No more tiny fonts and layouts!