介绍视窗(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等等。它们将通过窗口大小的调整或旋转设备的浏览器来重新计算这些值。
占用页面的整个高度
每一个前端开发人员都致力于这件事。你的第一直觉是这样做：
然而，除非我们为html和body添加100%的高度，但只是这样还是不行的，因为这样的代码并不优雅而且很有可能会破坏你的设计的其余部分。使用vh就变得相当容易了，只需要为高度设置100vh，那它将永远都是你窗口的高度。
视口宽度大小
vw是CSS3新加入的一个使用视口宽度来计算字体大小的单位。这样可以允许更多的响应字体大小。
尽管这似乎是为响应式设计的一个很有用的单位，但我个人不是它的粉丝。因为它并不能在字体大小上给我更多的控制权，他总是显示的过大或过小。
我的方法
在我做这项研究之前，我一直使用像素来设置我的字体大小。这是因为现在的大多数浏览器允许用户在字体太小的情况下自行放大页面，所以使用像素并没有什么问题。
但是，我发现这种方式在很大程度上限制了扩展能力。虽然我的字体在中小屏幕上看起来不错，但他应该在大屏幕上有更好的优化。即便用户有放大的选项，这也不应该是我们希望他们来做的事情。
因此我使用rem设置的解决方案是(使用像素作为备用)。
新闻热点
疑难解答
