css em/rem 固定乘以 16？答案

【问题标题】：css em/rem fixed to multiply by 16?css em/rem 固定乘以 16？
【发布时间】：2021-01-07 04:01:07
【问题描述】：

我有以下基本页面，我想在其中设置 320 像素的媒体断点，但希望根字体大小为 14 像素，我已经设置了。为什么我的断点仍然设置为 16px x 22.8em = 364.8px 而不是 14px x 22.8em = 319.2px？如果我从 rem 更改为 em，我会得到相同的结果。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>#</title>

<style type="text/css">
html {
    font-size: 14px;
}

@media (min-width: 22.8rem) {
    html {
    font-size: 4rem;
    }
  }
</style>

</head>

<body>
    <p>This is some text</p>
</body>
</html>

【问题讨论】：

我知道 em 用于包含元素，rem 用于根元素。
抱歉，我认为不应该根据字体大小移动断点。如果您的字体大小为 12 像素，那么您的计算机屏幕不会因此变小。断点=不同的设备宽度

标签： css

【解决方案1】：

https://www.w3.org/TR/css3-mediaqueries/#units

媒体查询中的相对单位基于初始值，这意味着单位从不基于声明的结果。例如，在 HTML 中，“em”单位是相对于“font-size”的初始值的。

【讨论】：

【解决方案2】：

简短回答：媒体查询在 html 标记之前有一个字体大小在文档之外的父级。您应该在媒体查询中使用 px 。像素是您要比较的对象。

em 是通过继承来缩放的，而 rem 只根据第一个字体大小定义来缩放。

所以要澄清上面链接文章中关于媒体查询单元的 w3.org 描述。 rem 与 font-size 的初始值直接相关。 em 是相对于其父字体大小的。

如果你在 html 中更改字体大小为 px rem 将受到影响。为避免 em 受到影响，您可以更改正文中的字体大小（以 px 为单位），或者可能是其他静态值。

这可能是固执己见。由于 rem 接受 html 上的字体大小作为根字体大小，媒体查询也应该这样做。 media em 应该直接从 body 缩放，甚至更好，如果 head 可以包含字体大小，因为 css 文件和元视口是 head 的子级。

【讨论】：