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 。

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

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

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

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

我可以想到使用JavaScript来获取浏览器默认字体大小的复杂方式，但我不能不知道为什么媒体查询不使用顶级元素的字体大小而不是浏览器的默认字体大小。我也希望有更好的方法来处理这个问题，而不需要复杂的JavaScript。

总结一下，我正在寻找：

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

Answer 1

我可以想到使用JavaScript来获取浏览器默认字体大小的复杂方式，但我不能不知道为什么媒体查询不使用顶级元素的字体大小而不是浏览器的默认字体大小。

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

总结一下，我正在寻找：


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

这需要更改font-size: medium对应的值（请参阅What is an "em" if the font-size of the document is specified in ems?），这是不可能的。

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

font-size compute to their corresponding absolute lengths的关键字值。从理论上讲，您可以使用JavaScript来获取指定值{{1的任何元素的计算字体大小（与CSS＆＃34;计算值＆＃34;在此特定情况下的定义一致）。然后将该值放入媒体查询中，但这需要使用JavaScript font-size: medium而不是CSS window.matchMedia()来实现所有媒体查询。这不过是简单的事。

Answer 2

您可以使用rem单位而不是em单位。 Em使用它的父元素。我的意思是如果你设置基本字体大小：20px并且你有两个ul一个并且你设置父ul字体大小2em和子ul字体大小设置2em比父ul具有font-size 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单位，你就不会遇到这种问题。见下面的代码

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>

我希望它会对你有所帮助。而媒体查询工作也很好。

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

2 个答案: