Responsive design means making your website readable no matter what screen it might be on. In the words of karate master Bruce Lee, "Don't get set into one form, adapt it and build your own, and let it grow, be like water." Lee may have been talking about your mind, but his words apply just as well to your website. To paraphrase the rest of that quote, you put water into a cup, it becomes the cup; so, you put your content on a tablet, it becomes the tablet; you put it on a TV, it becomes the TV."
On a more practical level, achieving a Bruce Lee-like command of the fluid web means ditching the pixels and points for flexible units like ems or percentages. There's a lot more to responsive design than just fluid layouts, but it's definitely a key part of the process.
Curiously, when it comes time to use the other universal element of responsive design -- the @media query that applies the actual responsive design -- most of us revert right back to pixels with something like @media all and (min-width: 500px) {}. It seems logical; after all, you're trying to fit your content into a window with specific dimensions, so why not use pixels?
Certainly you can, and most sites we've seen up to this point use pixels for the actual media query breakpoints, but it's worth noting that you can use ems here as well.
Lyza Gardner over at Cloud Four recently posted a look at why Cloud Four's new responsive design uses ems in its media queries. Here's her reasoning for Cloud Four's em-based approach:
The rest of the post walks through how Cloud Four used em-based media queries to create a better navigation experience on their site. Some of the advantages may not apply to every responsive design, but there is one additional benefit that works nearly everywhere -- em-based media queries mean that your site will handle user zooming much better, applying media queries instead of allowing content to overflow its container.
But perhaps the best part of an em-based approach is that it seems to work in nearly every web browser. Cloud Four's post doesn't get into the specifics of their browser testing so I fired up a couple of virtual machines and tested their site and my own simplified demo page in every major browser.
According to my testing, em-based media queries work properly in all OS X browsers. (I tested the latest versions of Safari, Firefox, Chrome and Opera.) Only Firefox and Opera apply media queries on zoom, though. (Chrome and Safari need a page refresh before the query is applied.)
On Windows 7 Firefox, Opera and Chrome behave the same way they do on OS X. IE 9 also worked fine and, like Firefox and Opera, applies media queries when zooming without needing a page refresh. Judging by the comments on the Cloud Four blog, Chrome on Linux may have some issues, but in my testing Firefox and Chrome on Fedora worked as expected.
All the mobile browsers I tested on Android worked as well (Firefox, Chrome, Opera Mini and the default Android browser). On iOS Mobile Safari applies em-based queries as you would expect.
In the end you certainly don't need to use em-based media queries. As many sites out there demonstrate, pixel-based queries work. At least for now. However, as a wider range of screen sizes begin to access the web switching to em-based queries may put you ahead of the game. Em-based queries mean addressing the content-width rather than just the screen width and that feels like a more future-friendly approach.
