Possible issues with em-based media queries (1)

We expect our media query to start working at 800px, so we used 50em for the media query (800/16). Maybe we used a tool that automated the conversion from pixels to ems in our media queries.

Sadly we have used pixel-based dimensions for our blocks: one has a pixel width, and the others have rem and em-based widths but we have set the root font-size to 16px at some point in the project’s life cycle, so they’re virtually pixel-based now.

If the user’s base font size remains at the conventional 16px, we are alright. If it’s different, our element dimensions and our media queries will become mismatched.

How to see this issue:

In browser settings, change the base font-size to 24px. As a result:

1. The sizes of elements and text on this page are unaffected.
2. The media query in this page hits at 1200px instead of the expected 800px.

Visual test: