视窗(Viewport)单位已经有了好几年了，但我们并没有看到它被经常使用。它们现在正在被所有的主流浏览器所支持并提供独特的功能使它在特定情况下非常有用，特别是那些涉及响应式的设计。
介绍视窗(Viewport)单位
视窗(Viewport)是你的浏览器实际显示内容的区域——换句话说是你的不包括工具栏和按钮的网页浏览器。这些单位是vw,vh,vmin和vmax。它们都代表了浏览器(视窗(Viewport))尺寸的比例和窗口大小调整产生的规模改变。
比方说我们有一个1000px(宽)和800px(高)的视窗(Viewport)
vw——代表视窗(Viewport)的宽度为1%，在我们的例子里50vw = 500px。
vh——窗口高度的百分比 50vh = 400px。
vmin——vmin的值是当前vw和vh中较小的值。在我们的例子里因为是横向模式，所以50vim = 400px。
vmax——大尺寸的百分比。50vmax = 500px。
你可以在任何一个可以使用像素值的地方使用它们，比如width,height,margin,font-size等等。它们将通过窗口大小的调整或旋转设备的浏览器来重新计算这些值。
占用页面的整个高度
每一个前端开发人员都致力于这件事。你的第一直觉是这样做：
#elem{
height: 100%;
}
然而，除非我们为html和body添加100%的高度，但只是这样还是不行的，因为这样的代码并不优雅而且很有可能会破坏你的设计的其余部分。使用vh就变得相当容易了，只需要为高度设置100vh，那它将永远都是你窗口的高度。
#elem{
height: 100vh;
