我想知道 VW 和 EM 之间的主要区别是什么，因为它们都随窗口大小缩放，并且都在响应式设计中使用。
最佳答案
I am wondering what is the main difference between VW and EM, as both of the they scale with the window size and both of them are using in responsive design.
VW 是——正如一些人正确指出的那样——视口(viewport)的百分比宽度。
考虑到小型智能设备通常具有高而窄的视口(viewport)，而更大的笔记本电脑类型设备具有更多信箱形状的视口(viewport)，此值可能会产生奇怪的、不完美的结果。
EM，是字体与规则直接父级相比的比例的度量。
这里的几个答案似乎在字体大小的定义上犯了一些基本错误。如所述:
em refers to the current font-size and scalable with respect to it. For instance, if the font-size of document is 14px, then 1em = 14px; 2em = 28px and so on.
只有当声明 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.94px
因为每个 em 仅与其直接父级相关。这显然是一种在处理 CSS 文件时混淆和隐藏实际值的非常简单的方法，除非您喜欢使用计算器。一种解决方案是使用 Root em，即 rem，这是在 html 元素标签中设置的 根值字体大小的 em 比例。
因此，如果您返回到 CSS:
p {
font-size:0.9rem;
}
This 现在的大小为 14 x 0.9，因为它采用根元素(HTML，不是 body 标签)中定义的字体大小。与使用 just em 相比，这是一种更简洁的定义字体大小的方法。
关于html - 在 CSS 中，VW 和 EM 有什么区别？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34953044/