Nicolas Bouvrette Nicolas Bouvrette - 2 months ago 9
CSS Question

Is is possible to overwrite the browser's default font-size in media queries using EMs?

A lot of people think that 1em = 16px. This is not true,

1em
=
value of your browser font-size which is most of the time 16px
. While it is not common to change browser default font-size, it is still an easy to change setting.

Given this situation, it is still easy to overwrite the em value from an
HTML
element perspective since it uses the top element's font-size. For example:

html {
font-size: 20px;
}


This simple style would cascade down to the rest of the document and 1em would effectively become 20px.

The problem is, when using CSS with
media queries
, the value of the em seems to be stuck at the browser style level and not the top level element. For example:

@media screen and (min-width: 2em) {
...some style...
}


If we consider the previous example with the 20px HTML overwrite, one could expect that 2em in that context refers to the top level element and would have a value of 40px. But it does not, it will be
2 * browser default font-size
(e.g. 16px, so 36px). Even worse, if you customized your browser font-size to 24px, 2em will effectively have a value of 48px.

Is there ways around this? The main concern is that it's hard to predict style of media queries if we cannot overwrite the browser default font-size. This value becomes unpredictable, which means your style will also be.

I can think of a complex way using JavaScript to get the browser default font-size but I can't stop wondering why media queries don't use the top element's font-size instead of the browser's default font-size. I'm also hoping there is a better way to handle this which does not require complex JavaScript.

To summarize I'm looking for either:


  1. A way to overwrite the default browser font-size value when using media queries.

  2. A simple way to get the default browser font-size.


Answer

I can think of a complex way using JavaScript to get the browser default font-size but I can't stop wondering why media queries don't use the top element's font-size instead of the browser's default font-size.

As the name implies, media queries are designed to query information about the media as represented by the user agent. Hence browser, not root element. If you want queries to be based off of the root element you're looking for element queries, something which today isn't available in production in any form.

To summarize I'm looking for either:

  1. A way to overwrite the default browser font-size value when using media queries.

That would require changing what value font-size: medium corresponds to (see What is an "em" if the font-size of the document is specified in ems?), which is not possible.

  1. A simple way to get the default browser font-size.

Keyword values for font-size compute to their corresponding absolute lengths. You could, in theory, use JavaScript to get the computed font size (which coincides with CSS's definition of "computed value" in this specific case) of any element with a specified value of font-size: medium, then put that value in your media queries, but this requires implementing all your media queries using JavaScript window.matchMedia() instead of CSS @media. Which is anything but simple.