小编典典

宽度:100%和宽度:100vw之间的区别?

css

我必须在屏幕高度上安装iframe。显然,我希望宽度为100%,但是由于这种方法不起作用,因此我使用了100vh。但是像vw这样的vh并不完全是100%。在我的笔记本电脑中,通过镀铬虽然100%的宽度可以完美呈现而不需要水平滚动条,但vw大约可以增加一厘米。


阅读 5146

收藏
2020-05-16

共1个答案

小编典典

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

使用width: 100vw代替的区别在于width: 100%,虽然100%将使元素适合所有可用空间,但视口宽度具有特定的度量,在这种情况下,可用屏幕的宽度 包括文档边距

如果设置样式body { margin: 0 },则100vw的行为应与100%相同。

补充笔记

将其vw用作网站上所有内容的单位,包括字体大小和高度,将使网站始终与设备的屏幕宽度成比例显示,而不管其分辨率如何。这样可以非常轻松地确保您的网站在工作站和移动设备上都能正确显示。

您可以font-size: 1vwbodyCSS中设置(或任何适合您项目的大小),并且以rem单位指定的所有内容都会根据设备屏幕自动缩放,因此可以很容易地将现有项目甚至框架(例如Bootstrap)移植到此概念。

2020-05-16