vw和vh分别代表视口宽度和视口高度。
使用
width: 100vw代替的区别在于
width:100%,虽然
100%将使元素适合所有可用空间,但视口宽度具有特定的度量,在这种情况下,可用屏幕的宽度 包括文档边距 。
如果设置样式
body { margin: 0 },则100vw的行为应与100%相同。补充笔记
将其
vw用作网站上所有内容的单位,包括字体大小和高度,将使网站始终与设备的屏幕宽度成比例显示,而不管其分辨率如何。这样可以非常轻松地确保您的网站在工作站和移动设备上都能正确显示。您可以
font-size:1vw在bodyCSS中设置(或任何适合您项目的大小),并且以rem单位指定的所有内容都会根据设备屏幕自动缩放,因此可以很容易地将现有项目甚至框架(例如Bootstrap)移植到此概念。



