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

Is is possible to overwrite the browser's default font-size in media queries using EMs?

本文关键字：浏览器默认字体覆盖 em 媒体查询可以使更新时间：2023-09-26

很多人认为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在该上下文中指的是顶层元素，其值为40px。但它没有，它将是2 * browser default font-size(例如16px，所以36px)。更糟糕的是，如果您将浏览器的font-size定制为24px，那么2em将有效地具有48px的值。

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

我可以想到一个复杂的方法使用JavaScript来获得浏览器默认的font-size，但我不能停止想为什么媒体查询不使用top元素的font-size而不是浏览器的默认font-size。我也希望有一个更好的方法来处理这个不需要复杂的JavaScript。

总而言之，我在寻找:

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

我可以想到一个复杂的方法使用JavaScript来获得浏览器默认的font-size，但我不能停止想为什么媒体查询不使用top元素的font-size而不是浏览器的默认font-size。

顾名思义，媒体查询设计用于查询由用户代理表示的媒体的信息。因此是浏览器，而不是根元素。如果你想要查询基于根元素，你需要寻找元素查询，这在今天的生产环境中是无法以任何形式实现的。

总而言之，我在寻找:

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

这将需要更改font-size: medium对应的值(参见什么是"em")如果文档的字体大小在ems?)中指定，这是不可能的。

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

font-size的关键字值计算为相应的绝对长度。理论上，您可以使用JavaScript来获得计算出来的字体大小(这与CSS对"computed value"的定义一致)。在这个特定的情况下)，任何元素的指定值为font-size: medium，然后将该值放在您的媒体查询中，但这需要使用JavaScript window.matchMedia()而不是CSS @media实现所有媒体查询。

您可以使用rem单位而不是em单位。Em与它的父元素一起工作。我的意思是如果你设置base - font-size: 20px你有两个ul一个在一个里面你设置父ul的font-size为2em子ul的font-size为2em父ul的font-size为40px子ul的font-size为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>

我希望它能帮助你。并且媒体查询工作良好