宽度：100% 和宽度：100vw 之间的区别？

Question

我必须在屏幕高度上安装一个 iframe。显然，我想要 100% 的宽度，但由于这不起作用，我使用了 100vh。但是 vh like vw 并不完全是 100%。在我的笔记本电脑中，虽然 100% 宽度无需水平滚动条即可完美呈现，但 vw 有大约一厘米的额外宽度。

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

Answer 1

vw 和 vh 分别代表视口宽度和视口高度。

使用 width: 100vw 而不是 width: 100% 的区别在于，虽然 100% 将使元素适合所有可用空间，但视口具有特定宽度，视口case 可用屏幕的宽度，包括文档边距。

如果设置样式 body { margin: 0 } ，则 100vw 的行为应与 100% 相同（对于 body 的子元素）。

补充说明

使用 vw 作为网站中所有内容（包括字体大小和高度）的单位，无论分辨率如何，网站始终与设备的屏幕宽度成比例显示。这使得确保您的网站在工作站和移动设备上显示完全相同变得非常容易。

您可以在您的 body CSS 和 中指定的所有内容中设置 font-size: 1vw （或适合您的项目的任何大小） rem 设备将根据屏幕自动缩放很容易将现有项目甚至框架（例如已经使用 rem 作为一切单元的 Bootstrap）移植到这个概念。

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

Answer 2

哈文纳德的回答似乎并不完全正确。我发现 vw 填充了视口宽度，但不考虑滚动条。因此，如果您的内容比视口高（这样您的网站就有一个垂直滚动条），那么使用 vw 会产生一个小的水平滚动条。我不得不将 width: 100vw width: 100% 以摆脱水平滚动条。

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