视口比例长度定义了相对于视口的长度大小，这是文档的可见部分。 当视口的大小被修改（通过更改桌面计算机窗口大小或旋转手机或平板设备的方向）时，只有基于Gecko的浏览器才动态更新视口值。
结合 overflow:auto，滚动条最终占用的空间大小不是减去视口大小之后的宽度，而overflow:scroll 才是。
ref： Web 技术文档 - CSS - Mozilla
vw和vh是相对于视口（viewport，也可以叫做视区、视界或可视范围）的宽度和高度。由于现在移动设备（主要是手机）的屏幕尺寸千差万别，如果仍然根据屏幕的物理分辨率来设计网页，效果会很难统一，因此html5和css3引入视口的概念来代替显示器的物理尺寸。通过在meta标签上的设置，视口的长宽可以跟设备的物理分辨率相等，也可以不相等（以便手机上可以实现用两个手指来放大会缩小页面），可根据需要灵活掌握。在PC中，视口的长宽则是跟浏览器窗口的物理分辨率恒等的。1vw等于视口宽度（viewport width）的百分之一，也就是说100vw就是视口的宽度。同理，1vh等于视口高度（viewport height）的百分之一。
