EM vs PX vs REM in Media Queries.

February 23, 2013

The question from commenter Razor was;

“Well you are setting your breakpoints to pixels like max-width 500px and so on. While currently getting my own hands dirty and started to learn CSS and all RWD related things I’ve seen a lot differences one is adding breakpoints…

For example one uses pixels as you did the other one uses em’s can you explain why em’s in those breakpoints whats the benefit of them there?

And how they are calculated? Is it like when setting your base to 16px or 100% the math would be: 320/16 = 20.000em for a 320 pixel breakpoint while having value / context in mind or is that completely wrong?”

Razor’s Comment

It’s a great question, so let’s break it down, there are a few different ways to manage media queries, the usual suspects are EM’s and Pixels.

The question is, what is the best or indeed the most useful?

The answer to that is, as with most things, developer preference, which you feel most comfortable using and hurts your brain the least. Personally my brain works in pixels, even though I use REM’s for font sizing.

REM’s are different from EM’s in one distinct way – EM’s use the containers font size to calculate, whereas REM’s are root based, I.E they use the HTML font-size as the base to calculate from.

Let’s check out an example (click the tabs to checkout the HTML, CSS and Result);

html {
  font-size: 16px;
}

.container {
  font-size: 1.4em;
}

p.first {
  font-size: 1.4em;
}

p.second {
  font-size: 1.4rem;
}Check out this Pen!

Note how the first paragraph is using 1.4 as a multiplier along with the second. However, the 1.4em on the first paragraph is multiplied by its container font-size (in this case, .container) which itself is using 1.4ems.

So our font-size in the first paragraph is calculated as 16px (the HTML font-size) x 1.4 x 1.4 – and thusly ending up at 31.36 pixels (in real terms).

However, because the second paragraph is using REM’s it’s simply the HTML font size (16px) x 1.4, so ends up at 22.4px (in real terms).

I say “in real terms” because while that’s what it ends up at it’s theoretically missing the point. If that base font-size changes, either the user zooms their browser (in the traditional sense, I.E increasing font size) then the resulting pixel sizes will change also.

So how does this impact media queries?

Well, ultimately, if you’re using pixels it will literally be that strict. For example, say we have a media query that is like so;


@media (max-width: 500px) {
   rules here...
}

It will force that 500px as the breakpoint, regardless of the base font size or zoom level. You can imagine how this might be a problem if, for example, your user zooms to a factor of 10, the width of the browser is still going to be the determining factor as a breakpoint, so it might completely ruin your beautifully designed website.

Using EM’s can help solve this problem because if they were to zoom it would increase the capture range of the breakpoint, thusly kicking in the media query sooner.

However, one weakness lies in EM’s in that it’s based on the browser default font size, something you cannot control. So even if you set a font size for your HTML or Body element it will be ignored in favour of something like 16px, depending on what the browser is, or indeed what the user has set as their default font size.

This means annoying calculations for you. So while, EM’s do provide a solution to zoomed users and media queries it also has a draw back.

So as the developer you have to figure out which is best for you – do you mind doing complex math to figure out the right EM’s or do you not really mind if the layout breaks a little at high zoom levels?

Me? I wish REM’s were reliable to use in Media Queries.

REM’s would solve this issue completely, however they aren’t supported in IE8 or Opera Mini at all and it’s only just been fixed in Webkit (Chrome/Safari).

Once IE8 dies (soon I hope) then I think realistically by then REM’s will be the best of both worlds. You can calculate based on the HTML element, but if the user zooms then your media queries will adjust themselves, hooray!

comments powered by Disqus