(drumroll please)
Stephanie Rewis (off a lead from Susan Robertson):
the
em
base in media queries comes from the user’s setting (which is the 16px browser default if not changed by the user).
Intuitively, it seems like changing the font-size
at the :root
/ html
level would change what 1em
is and thus change where breakpoints hit, but it doesn’t.
Em-based media queries got very popular after Lyza Gardner detailed how breakpoints didn’t hit as you’d expect with browser zooming. That’s not the case anymore, yet I still find that fact quoted a lot. So just be aware that you don’t have to force yourself to use em-based media queries if you don’t otherwise need to or prefer to — and if you do use them, assuming 1em = 16px is the best you can do.