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

Question

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

鉴于这种情况，从HTML 元素的角度来看，覆盖 em 值仍然很容易，因为它使用顶部元素的字体大小。例如：

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。

总结一下，我正在寻找：

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

Answer 1

您可以使用 rem 单位而不是 em 单位。 Em 使用它的父元素。我的意思是如果您设置基本字体大小：20px，并且您有两个 ul 一内一，并且您将父 ul 字体大小设置为 2em，子 ul 字体大小设置为 2em，而不是父 ul 字体大小为 40px，但子 ul字体大小为 80 像素。因为 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>

希望对你有所帮助。并且媒体查询也可以正常工作。

Answer 2

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

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

总结一下，我正在寻找：

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

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

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

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