Question

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

Answer 1

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

VW是 - 正如几个人已经正确陈述的那样 - 视口的百分比宽度。

考虑到小型智能设备通常具有较高的窄视口和较大的视频端口，笔记本电脑型设备具有更多信箱形状的视口，此值有可能产生奇怪的，不完美的结果。

EM，衡量字体 的比例与直接父 规则的比较。

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

em指的是当前的字体大小，并且可以相对于它进行扩展。例如，如果文档的字体大小是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.94px

因为每个em仅相对于其直接父级。除非您喜欢使用计算器，否则这显然是在您处理CSS文件时模糊和模糊实际值的一种非常简单的方法。解决方案是使用Root em，它是rem，这是根值字体大小的em比例，它在html元素标记中列出。

因此，如果您使用以下命令返回CSS：

p { font-size:0.9rem; }

此现在的大小为14 x 0.9，因为它采用了根元素中定义的字体大小（HTML，不是正文标记）。这比定义只是 em更清晰地定义字体大小。

Answer 2

VW是视口宽度（窗口的可见大小），em是字母的宽度＆＃39; m＆＃39;在当前字体中。

所以5vh是视口的5％，5em是5＆＃39; m的宽度。

进一步阅读：

CSS Values and Units Module Level 3

Mozilla Developer Network article on CSS length units

Answer 3

主要区别在于每个单位的参考点。 VW，VH，VMIN和VMAX与视口（＆＃39;窗口＆＃39;）大小一起缩放。

另一方面，EM会根据元素的字体大小进行缩放。例如，如果你的主体上有font-size，你的css中有h1元素：

boolean loading

文档中的所有文本的字体大小均为16px，除了h1之外，其字体大小为32px。但是，

body {
  font-size: 16px;
}

h1 {
  font-size: 2em;
}

h1元素的字体大小会随着视口的宽度（视口宽度的2％是特定的）缩放。

Answer 4

em 指的是当前的字体大小，并且相对于它是可扩展的。例如，如果文档的字体大小是14px，那么1em = 14px; 2em = 28px等等。

而 vw 指的是相对于视口的字体大小，该视口从设备更改为设备。因此，14vw = 14 * 1/100 =视口宽度的1.4％。

Answer 5

14 * 1/100 = 14％。另一方面，问题在于他在em和vw之间的区别。因此，最好将它们与相同的参考系相关联。
首先，我们谈论屏幕媒体，而不是印刷媒体。因为em基本上对应于16px（字母“ m”的宽度-当前字体为BSMP），而vw对应于视口宽度的1/100，我们将它们关联起来：
在1.440像素视口上的宽度除以16 =>此行上的90 em或100 vw。
因此，1em对应于1,1111 vw（实际上，1 rem = 1,1111 vw）。

现在，对于响应式设计，如果使用em，请在容器级别设置字体大小并使用em播放。
如果使用vw，则它是一个值，与视口无关，与宽度无关。有时最好设置一个最小值（也许以px为单位），以免由于物理尺寸而无法读取字体大小。

祝好运！：）

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

5 个答案: