(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.

Direct Link →