在 CSS 中，VW 和 EM 有什么区别？

我想知道 VW 和 EM 之间的主要区别是什么，因为它们都随窗口大小缩放，并且它们都用于响应式设计。

原文由 Zikooz 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 315

我想知道 VW 和 EM 之间的主要区别是什么，因为它们都随窗口大小缩放，并且它们都用于响应式设计。

VW 是——正如一些人正确指出的那样——视口的百分比 _宽度_。

考虑到小型智能设备通常具有高而窄的视口，而更大的笔记本电脑类型设备具有更多的信箱形视口，该值可能会产生奇怪的、不完美的结果。

EM ，是字体 与规则直接父 级相比的比例测量。

这里的几个答案似乎在字体大小的定义中犯了一些基本错误。如述：

em 指的是当前的字体大小和相对于它的可缩放性。比如document的font-size是14px，那么1em = 14px； 2em = 28px 等等。

仅当声明 1em 的规则是文档的直接子项或没有应用其他字体缩放规则时，这才是正确的。很容易发生文档的字体大小为 14px，子元素的字体大小为 2em 然后子元素的字体大小为 1em 这意味着两者子层的字体显示为 28px。

这显然会在创建站点时造成严重的混乱。 EM 值只是父字体大小的比例。举个例子：

 html {
    font-size:14px;
}

h1 {
    font-size:1.5em;
}
p {
    font-size:0.9em;
}
main {
    font-size:1.15em;
}
.container {
    font-size:1.1em;
}

所以，对于 HTML：

 <html>
<body>
    <main>
        <div class="container">
        <h1>Header</h1>
        <p>Some paragraph text</p>
        </div>
    </main>
</body>
</html>

那么段落内容的字体大小是多少呢？是 0.9 x 14px 吗？不，它实际上是

14 x 1.15 x 1.1 x 0.9 = 15.94 像素

因为每个 em 仅与其直接父级相关。这显然是一种在处理 CSS 文件时混淆和隐藏实际值的非常简单的方法，除非您喜欢使用计算器。一个解决方案是使用 Root em，即 rem 这是 html 元素标签中设置 的根值字体大小 的 em 比例。

所以，如果你返回到 CSS：

 p {
    font-size:0.9rem;
}

现在它的大小为 14 x 0.9，因为它采用根元素（HTML， 而不是 body 标签）中定义的字体大小。与仅使用 em 相比，这是一种更简洁的定义字体大小的方法。

原文由 Martin 发布，翻译遵循 CC BY-SA 3.0 许可协议

在 CSS 中，VW 和 EM 有什么区别？

你尚未登录，登录后可以

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

Stack Overflow 翻译