Pixels or EM’s: the Best Approach to Responsive Web Design

So it seems like everyone is onboard with the fact that responsive web design isn’t a fad or a trend but the new standard of how a website should be built. Which is good, given the amount of various devices that users are using to access the web.

So in your stylessheets, you’re all now adding something like this:

@media screen and (min-width: 1026px){
//blah blah blah
}


Responsive Web Design Achieved!

Well, not really.

For starters, this query says that these styles apply to all devices that are 1026 css pixels across, not the number of pixels that make up the width of the physical device. I’ve already talked about how pixels affect responsive web design. Check it out if you missed it, just know that if you do it this way you won’t always get the results you want.

But let’s take into account another situation. Say our user is a little near-sighted. So they pump up the viewable size in their browser to 125%. Will it affect your design? How?

Yes.

It all comes down to the content.

Most sites now use em’s to size their font. And most em’s are based off of the letter M being 16px’s across. So if a font is sized to be 1.5em’s, the savvy designer will assume that the letter will be 24px’s across. These are still CSS pixels, coincidentally.

But when the user increases the size of the font of their monitor, they are doing that based off of the physical pixels. The users can’t see CSS pixels but they can see if the font is still too small or not.

This changes the number that an em is based off of. This also changes the size of everything that is em-based. Just as importantly, it also affects things that are not em-based, such as our example media query.

So things such as line height can get skewed. Floating elements can do some weird wrapping. Elements can be too wide for the viewport.

Basically things can get wonky.

Why? Because the media query is being tested against the screen in pixel sizes. But the pixels of the screen never change; neither physical pixels or how CSS pixels are determined.

But the size of the font does. And what defines the font size? All together class: ems!

If you use ems as a sizing guide in your media queries, the browser will test against the size of the font being displayed and use that to trigger your media queries. You will have great control over the display of your design and how a user sees it in all use case scenarios, not just with the spectacle wearing users.

Having trouble converting pixels to ems? Try this handy conversion tool.

I would also recommend setting the font size of the body tag; either to 16px or 100% to control the base number of the font a little more. The better control that you have over your design, the better you can control how it will be displayed across the board.