Now that the WebKit page-zoom bug has been fixed, what are the main reasons for using em-based media queries rather than pixel-based media queries?
Bounty
I'm adding a bounty to my question because so many prominent CSS frameworks and web developers use em-based media queries that I'm convinced there must be good reason(s) for doing so.
The one advantage I'm aware of is that if a user changes the default font size in their browser, content will squeeze in a manner similar to the issue solved by the page-zoom fix. Is there any data to show people actually do change the default size rather than zoom?
Note
To make my question more focused, I removed two peripheral items. The original post will add perspective to @nwalton's great answer, which addressed all three points I asked about.
In my opinion most page layouts are complex enough that it's best to be safe and use em breakpoints in your media queries in addition to responsive units for font sizes, dimensions, margins, and padding. This decision is ultimately an individual one, but be sure to test and consider your audience.
Ems are awesome for making flexible grids and measurements. For example, if a container width is specified in ems, I can proportionally resize the container and its contents in my media queries with one declaration. In this example, resizing the font also resizes its container proportionally.
EM is relative to the parent element's font size, so if you wish to scale the element's size based on its parent's size, use EM. REM is relative to the root (HTML) font size, so if you wish to scale the element's size based on the root size, no matter what the parent size is, use REM.
In addition to em and rem , a popular unit of choice for media queries is the good old pixel.
In modern browsers there should be no difference between em-based and pixel-based media queries if the browser handles the zoom correctly. I actually had trouble with em-based media queries in one project because in one of the media queries the base font size changed and then all of the other media queries got messed up. That may have just been a stupid mistake, but you get the idea. I'd go with pixels. See update below. While zoom does not have an effect on modern browsers, base font size still does.
The biggest problem I see you could run into with the 62.5% technique and rem
is if you run into browsers that don't understand it. If you're worried about that you could add a fallback for less-capable browsers, and set rem
for the modern ones.
html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; } h1 { font-size: 24px; font-size: 2.4rem; }
If there's any difference in how fast browsers process px
vs em
, it's not noticeable. Browsers calculate CSS really, really fast (much faster than JS). So it's probably not worth worrying about.
I have used px
for media queries in the past because they're so reliable and, like you say, they zoom just fine. Update: However, if a user changes their default style sheet, your media queries will be off.
Ems are awesome for making flexible grids and measurements. For example, if a container width is specified in ems, I can proportionally resize the container and its contents in my media queries with one declaration.
In this example, resizing the font also resizes its container proportionally.
h1.title { font-size: 2em; width: 20em; background-color: #baff1e; } @media (min-width: 400px) { h1 { font-size: 2.5em } }
I haven't actually used rem
much, but I can see why a lot of people like it. You've got the power of a relative unit, but you don't have to deal with the crazy stuff that can happen when you throw in the CSS cascade.
Sizing things based on the browser's base font size seems like the web-standards thing to do, because then you allow for browsers whose optimal base font size might not be 16px. In practice, though, it kind of works the other way. From what I've seen, browsers use 16px
as the base font size because that's what everyone expects, and set the actual size of that CSS measurement to look decent in the browser.
This has been around for quite awhile, and right now I don't know any reason not to use it. There was a 2007 article on A List Apart where they did some tests and found that font sizes displayed more reliably across browsers when the base font was declared at 100%
and text was sized in em
. But I'd be surprised if any of the browser constraints listed there are really relevant anymore. I still have a hard time feeling good about setting my base font size to 10px
, but that's probably just personal preference.
After doing some tests, I'm reversing my practice of using pixels for media queries. I'm now recommending em
:
Users do change their base font size. One thread on the Mozilla support network, "How can I increase the browser default font size?" has over 5,000 views. And a similar thread has over 15,000. Another study found a percentage of users (0.3%) who did have a default font size smaller or larger than 'medium'. How often users actually change it seems irrelevant (see a previous SO answer). If some people do, it's probably worth supporting them.
Ems are likely more future-proof. They will work for any device whose optimal default font size is not 16px (as well as those that are).
The thing that convinced me the most was to see it in action. Here's a codepen demo. Notice that the browser's zoom probably makes no difference (I tested in Chrome). But if you actually go into your browser's settings and change the default font size from "medium" to something else, the widths are way off. In my opinion, this is unacceptable.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With