Vh和Vw的简介和使用

Vw:视区宽度百分值

Vh:视区高度百分值

Vmin:取Vw或Vh中较小的那一个

Vmax:取Vw或Vh中较大的那一个

1.视区:是指浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小

2.场景之元素的尺寸限制

我们应该都做过或见过这样的交互：点击下图，弹框查看原始大图；或者一屏内（不能有滚动条）大图幻灯片浏览。这类需求让人头疼的地方之一就是原始大图的尺寸限制问题——因为很有可能图片过大，尼玛一屏显示器区域不够放，我们需要对其进行缩放处理。这类限制的实现，在当下，需要获得图片的原始大小，以及浏览器内部尺寸，算大小，算比例等，算是比较折腾的。但是，vw, vh等单位本身就是浏览器视区大小相关单位，直接使用其做限制，岂不省了N多JS代码？？img { max-height: 90vh; } 

3.基于vw的响应式排版和布局

一般而言，屏幕越大，我们希望文字大小也越大，元素的尺寸也能等比例放大，尤其在现在的网页设计风格中。

如果要实现这种弹性自适应效果，目前主流的实现是通过设定根元素的font-size大小，具体元素或模块使用rem或em单位来实现。 
一种是直接设定一个临界点字体大小，如： 

还有一种就是使用JS在resize或者屏幕旋转的时候，动态修改root的font-size大小。

前面一种基于@media的CSS实现问题在于，内容的弹性自适应只会在临界点的时候，“Duang”变化下，于是，我们浏览器尺寸拉伸的时候，会感受到类似“噔噔噔”卡壳的效果，感觉就像是吃了含笑半步癫，使用JS的问题在于他是JS，要保证加载体验，需要头部内联，为了保证实时性，需要多个浏览器变化事件监测，用我的口头禅讲就是“显得啰嗦”。 
那有没有两全其美的方法呢？

有，那就是本文要隆重请出场的vw，配合CSS3 calc计算实现动态字体大小效果。

例如，我们希望浏览器宽度在600px~1000px变化的时候，html根元素的font-size大小是18px~22px之间对应变化的，则可以： 

于是，理论上，一个18px~22px字体大小动态匹配的布局基础就建好了。

一般出现“理论上”这三个字，就说明我要“放坑”了，大家闪开~~

此“坑”就是苹果系统的Safari浏览器不认识上面的属性值（如下截图）： 
 
就Safari不行，window下的所有浏览器，包括IE，以及mac下的Chrome等浏览器都是可以正确解析的。好在，我们还是有办法曲线救国的。那就是，我们基础字体大小不使用像素单位，使用百分比单位即可，如下： 

有个动态的根字体大小，我们就可以使用rem或em这些相对单位，来让我们的页面排版和布局更富有弹性。 
更新于2017年2月8日 
经过大型项目实践，下面这段CSS是最好的基于rem和vm和calc实践代码： 

然后，就可以愉快地使用rem单位用来排版和布局啦！