是否可以使用EM覆盖媒体查询中浏览器的默认字体大小？

Question

许多人认为1em = 16px 。 这是不正确的 ， 1em = value of your browser font-size which is most of the time 16px 。 虽然更改浏览器默认字体大小并不常见，但更改设置仍然很容易。

在这种情况下，从HTML元素的角度来看，覆盖em值仍然很容易，因为它使用了top元素的font-size。 例如：

html {
     font-size: 20px; 
}

这种简单的样式将层叠到文档的其余部分，而1em实际上将变为20px 。

问题是，将CSS与media queries一起使用时， em的值似乎停留在浏览器样式级别而不是顶级元素。 例如：

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

如果考虑上一个示例，该示例具有20px的 HTML覆盖，则可以预期该上下文中的2em指向顶级元素，其值为40px 。 但事实并非如此，它将是2 * browser default font-size （例如16px，所以36px）。 更糟糕的是，如果将浏览器的字体大小自定义为24px ，则2em实际上将具有48px的值。

有办法解决吗？ 主要问题是，如果我们无法覆盖浏览器的默认字体大小，则很难预测媒体查询的样式。 此值变得不可预测，这意味着您的样式也会如此。

我可以想到一种使用JavaScript获取浏览器默认字体大小的复杂方法，但是我不禁怀疑为什么媒体查询不使用top元素的字体大小而不是浏览器的默认字体大小。 我也希望有一种更好的方法来处理此问题，而无需复杂的JavaScript。

总而言之，我正在寻找：

1. 一种使用媒体查询时覆盖默认浏览器字体大小值的方法。
2. 一种获取默认浏览器字体大小的简单方法。

Answer 1

我可以想到一种使用JavaScript获取浏览器默认字体大小的复杂方法，但是我不禁怀疑为什么媒体查询不使用top元素的字体大小而不是浏览器的默认字体大小。

顾名思义，媒体查询旨在查询用户代理所代表的有关媒体的信息。 因此，浏览器，而不是根元素。 如果您希望查询基于根元素，那么您正在寻找元素查询，那么今天在生产中就没有任何形式的东西。

总而言之，我正在寻找：

1. 一种使用媒体查询时覆盖默认浏览器字体大小值的方法。

那将需要更改font-size: medium对应的值（ 如果在ems中指定了文档的字体大小，请参阅“ em”是什么？ ），这是不可能的。

2. 一种获取默认浏览器字体大小的简单方法。

字体大小的关键字值将计算为其相应的绝对长度 。 从理论上讲，您可以使用JavaScript获取具有指定font-size: medium值的任何元素的计算出的字体大小（在这种情况下，与CSS的“计算值”定义一致），然后将该值放入您的媒体查询，但这需要使用JavaScript window.matchMedia()而不是CSS @media来实现所有媒体查询。 这简直就是简单。

Answer 2

您可以使用rem单位代替em单位。 Em是它的父元素。 我的意思是，如果您设置基本字体大小：20px，并且其中两个ul设置为一个，则您将父ul字体大小设置为2em，将子ul字体大小设置为2em，而不是父ul设置了字体大小40px，但是子ul字体大小为80px。 因为em跟随他的父元素。 见下面的代码

 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> 

但是，如果您使用rem unit，则不会遇到此类问题。 见下面的代码

 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> 

希望对您有帮助。 媒体查询也可以正常工作。