Possible issues with em-based media queries (2)

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.

We are also sizing blocks using the rem unit, but at some point in the project’s life cycle we used pixels for some of the blocks.

If the user’s base font size remains at the conventional 16px, we are alright. If it’s different, our blocks sized with rem will match the media query, and the ones sized with pixels won’t.

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: