Question

我有以下基本页面，我想设置一个320px的媒体断点，但希望root-font-size为14px，这是我设置的。为什么我的断点仍然设置为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>

Answer 1

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

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

Answer 2

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

em 通过继承缩放，而 rem 仅通过第一个字体大小定义缩放。

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

如果你改变 html 中的 font-size px rem 会受到影响。为了避免 em 受到影响，您可以以 px 为单位更改正文中的字体大小，或者其他静态值。

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

css em / rem固定乘以16？

2 个答案: