We authored a stylesheet using a tool that generates media queries for us, and pixel values straight up from the design specs. The design specs say that some blocks must be horizontally centered and must use specific withs depending on explicit breakpoints:
So we set our breakpoints using pixels, our widths using pixels, even our text using pixels; just following the spec. Now, our media query generator converted our breakpoints to em values, but our widths are still in pixels. For instance:
@media (max-width: 28.74em) {
.row {
width: 300px;
}
}If the user’s base font size remains at the conventional 16px, we are golden. If it’s different, our element dimensions and our media queries will become mismatched.
If the user changed their browser’s base font size to 24px, the media queries will hit too soon, leaving a lot of blank space on the sides… not ideal, but not awful.
If the user changed their browser’s base font size to 14px, the media queries will hit too late, so part of the content will overflow the viewport (and possibly be cropped is there is some overflow:hidden going on somewhere).
How to see this issue: in browser settings, change the base font-size to 24px or to 14px (or even 12px). Test at different viewport widths.