Is is possible to overwrite the browser's defa

问题:

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.

回答1:

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.

2. 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.

回答2:

You can use rem units instead of em units. Em work with it's parent element. What I mean by that If you set base font-size: 20px and you have two ul one inside of one and you set parent ul font size 2em and child ul font-size set 2em than parent ul have font-size 40px but child ul have font-size 80px. Because em follow his parent element. See code below

html {
  font-size: 20px;
}

ul {
  font-size: 2em;
}

ul ul {
  
  font-size: 2em;

}

<ul>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam obcaecati amet, labore dignissimos itaque vero odio ipsa repellat, eum natus qui ipsum quidem. Quisquam voluptates, fugiat doloribus ad aperiam corrupti!
      <ul>Lorem ipsum dolor sit amet, consectetur adipisicing   elit. Enim deleniti labore minus laborum nobis impedit excepturi nostrum temporibus ipsam rerum, cupiditate ex veniam, delectus odio earum a id dolor expedita?
      </ul>
</ul>

But if you use rem unit you don't face this kind of problem. See code below

html {
	font-size: 20px;
}


ul {
	font-size: 2rem;
}

ul ul {
	font-size: 2rem;
}

<ul>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam obcaecati amet, labore dignissimos itaque vero odio ipsa repellat, eum natus qui ipsum quidem. Quisquam voluptates, fugiat doloribus ad aperiam corrupti!
    <ul>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim deleniti labore minus laborum nobis impedit excepturi nostrum temporibus ipsam rerum, cupiditate ex veniam, delectus odio earum a id dolor expedita?
    </ul>
</ul>

I hope it will help you. And also media query work fine.