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

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

Solution 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;
}

ulul {
  
  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;
}

ulul {
	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.