Media Queries In Em Not Affected By The Base Font Size

I'm trying to understand why setting a different base font size doesn't affect the EM values for the media queries. They are acting as the default base font size is 16px, while the

Solution 1:

To get font sizes that are relative to the font-size defined in an html rule, you have to use rem units, not em. em is relative to the element itself, and if there is no font-size definition, to the parent/next ancestor which has a font-size definition (which could also be defined in the browsers default settings, BTW).

ADDITION AFTER COMMENT OF OP:

Interesting: Since you define the html font size in percent, obviously the browser continues to treat its internal default setting as the root size (from which it derives the rem unit). If you change the font-setting in the html rule to a px setting, rem units will respond accordingly concerning the font-size, but the browser still keeps using its default font size (16px) for horizontal measuring (at least in Firefox). Have a look here (watch the 12px setting and the comments in the CSS rules): https://jsfiddle.net/zwc00gtk/2/

ONE MORE ADDITION:

For "regular" horizontal measuring, the rem unit works as expected, in the following example the .wrap div with the light-green background is set to width: 40rem, which is calculated as 480px when the font--size in html is set to 12px, and even becomes 400px when font-size in htmlis 62.5% (= 10px)

https://jsfiddle.net/n2dww2mt/1/

So it's only the media queries that won't accept anything else than 16px as the rem unit...