I'm a bit confused by the concept of using media queries based on em's instead of px, since em's are based on font sizes, and I wouldn't expect the "window" object to have a font size at all.
Do media queries based on values like max-width simply assume 1em = 16px universally at default zoom level, or is that something that can be overridden? I mean, em's are not "inherently" 16px at all, that's just what happens to be most browser's default font size.
> However, I've learned that when you test your media queries you will need to reload the page each time you change the zoom level. It's just a nitpick where media queries won't get affected by zoom level adjustments after the page load unlike browser resizes.
I think that's actually a good thing -- if you're adjusting the browser zoom level while you're looking at a page, that's because you want to inspect something more closely. You don't want the whole layout to change. Browsers also conveniently try to keep you looking at roughly the same thing in the scroll-position, even though the whole height of the page may have drastically changed.
if you're adjusting the browser zoom level while you're looking at a page, that's because you want to inspect something more closely.
Not me. HN is a good example where I have to zoom in to get the text at a decent font size on my phone. I absolutely want the page width to change and to reflow the text.
That's really a bug with HN not using a viewport meta tag. I agree, it's very difficult to read on a phone. A simple initial-scale:1.0 (or similar) on HN would be a great improvement.
Using em instead of px for media queries is definitely a bit of a mindmelter at first. However, if you're truly interested in building a responsive site, not just hitting a few target devices(1), I definitely recommend spending a little bit of time getting comfortable with the idea.
Mostly, it forces you to consider the context of your media queries, not just specific resolutions or device capabilities. This helps to future-proof your code for new devices and build for difficult-to-test for contexts, like users who always have a browser zoom level set higher than you expect.
This article really helped sell me on the idea and show me the way:
(1)I realize this sounds judgmental, I don't mean for it to be. There are plenty of perfectly valid reasons to "just hit a few target devices" using responsive design techniques instead of building a "truly responsive site".
Do media queries based on values like max-width simply assume 1em = 16px universally at default zoom level, or is that something that can be overridden? I mean, em's are not "inherently" 16px at all, that's just what happens to be most browser's default font size.
> However, I've learned that when you test your media queries you will need to reload the page each time you change the zoom level. It's just a nitpick where media queries won't get affected by zoom level adjustments after the page load unlike browser resizes.
I think that's actually a good thing -- if you're adjusting the browser zoom level while you're looking at a page, that's because you want to inspect something more closely. You don't want the whole layout to change. Browsers also conveniently try to keep you looking at roughly the same thing in the scroll-position, even though the whole height of the page may have drastically changed.