5.4.2 相对于视口

vw和vh是CSS 3中的概念，是相对于视口（viewport）宽度和高度的单位。不论怎么调整视口的大小，视口的宽度都等于100vw，高度都等于100vh。也就是把视口平均分成100份，1vw等于视口宽度的1%，1vh等于视口高度的1%。

在Bootstrap 4中定义了以下4个相对于视口的类：

说明如下。

■ .min-vw-100：最小宽度等于视口的宽度。

■ .min-vh-100：最小高度等于视口的高度。

■ .vw-100：宽度等于视口的宽度。

■ .vh-100：高度等于视口的高度。

使用.min-vw-100类的元素，当元素的宽度大于视口的宽度时，按照该元素本身宽度来显示，出现水平滚动条；当宽度小于视口的宽度时，元素自动调整，元素的宽度等于视口的宽度。

使用.min-vh-100类的元素，当元素的高度大于视口的高度时，按照该元素本身高度来显示，出现竖向滚动条；当高度小于视口的高度时，元素自动调整，元素的高度等于视口的高度。

使用.vw-100类的元素，元素的宽度等于视口的宽度；使用.vh-100类的元素，元素的高度等于视口的高度。

下面通过一个示例来比较.min-vw-100类和.vw-100类的作用效果。在示例中，定义了两个<h2>标签，都设置1200px宽，分别添加.min-vw-100类和.vw-100类。

【例5.17】相对于视口示例。

在IE 11浏览器中运行结果如图5-18所示。

图5-18 相对于视口效果

从上面的示例结果可以发现，设置了vw-100类的盒子宽度始终等于视口的宽度，会随着视口宽度的改变而改变；设置.min-vw-100类的盒子宽度大于视口宽度时，盒子宽度是固定的，不会随着视口的改变而改变，当盒子宽度小于视口宽度，宽度会自动调整到视口的宽度。