This is a reply to a post on zellwk.com concluding that “So.. I’m sorry to break your bubble, pixel fans, but it’s a no-go for pixel based queries.”
There are a few problems, and with the same data I come to a different conclusion.
I created what I think is the same test case, but I used 550px & 34.375em/rem width so I could use a straight browser window with no extra stuff around it.
Testing with base font-size
Using html {font-size: 200%} Zell wrote:
“em and rem units should not be affected by changes in font-size in the HTML since they’re based on the browser’s internal font-size property.”
The REM unit is “Equal to the computed value of font-size on the root element.”, the root element being the <html> element.
So if you change the HTML font size to 200%, Safari is correct to trigger at 800px.
The EM unit is based on the font-size of the element itself, but in the context of a media query it is comparing to the “width of the viewport”.
At that level, arguably it should trigger at 800px as well. I bet there’s some complex bugs tracker comments around that somewhere, it doesn’t seem like there is a clear answer for that so no-wonder browsers are different.
Note that if you apply the 200% to the body (which I thought was more common), then they all line up on the 400px value.
Testing with zoom
The key thing is that zooming with the browser is basically increasing the pixel size. Safari does trigger the pixel value correctly, at 400px (in the computed CSS). It is the EM and REM values that are not triggering at the correct size.
I get the same results for testing with a different browser default text-size, but note that:
“This is the correct implementation since px are absolute units.”
PX in browsers (i.e. CSS pixels) are relative to the device, and on desktops when you zoom in they are very much relative units.
In conclusion
So I would conclude that:
- You need to be careful changing the font size on HTML if you are worried about media queries, change the body font-size instead.
- Whichever unit you choose, you have to do that consistently across both media queries and all your layout specifications.
- Pixels are fine for media queries.
Personally, I think we need to embrace the zoom + media queries approach to making things bigger. Although there are some people who (still) resize text-only, that is much harder to develop for because it expands differently from the layout and other elements on the page (e.g. images).
The Guardian is an example that does it well, everything is done in EM, so zoom and increased text size are identical. On the other hand, you get the same result from sticking to pixels and zoom, so why jump through the browser bugs for that?
Thanks for the article. Talking about the REM unit, your text says “…the root element being the element.” Is the word “html” missing?
Yea, I spotted that, I needed to escape the brackets, thanks.
Love your inquiries. Zoom (text only) helps me quickly test how pages behave for users who use larger default font sizes.