视口单位
响应式web设计离不开百分比。但是，CSS百分比并不是所有的问题的最佳解决方案。CSS的宽度是相对于包含它的最近的父元素的宽度的。但是如果你就想用视口（viewpoint）的宽度或者高度，而不是父元素的，那该肿么办？ 这就是 vh 和 vw 单位为我们提供的。
1vh 等于1/100的视口高度。for example：浏览器高度900px, 1 vh = 900px/100 = 9 px。同理，如果视口宽度750px， 1vw = 750px/100 = 7.5 px。
可以想象到的，他们有很多很多的用途。比如，我们用很简单的方法只用一行CSS代码就实现同屏幕等高的框。
.slide {
height:100vh;
}
假设你要来一个和屏幕同宽的标题，你只要设置这个标题的font-size的单位为vw，那标题的字体大小就会自动根据浏览器的宽度进行缩放，以达到字体和viewport大小同步的效果！
vmin和vmax
vh和 vw 依据于视口的高度和宽度，相对的，vmin 和 vmax则关于视口高度和宽度两者的最小或者最大值。比如，浏览器的宽度设置为1100px，高度设置为700px， 1vmin = 7px， 1vmax = 11px。如果宽度设置为800px,高度设置为1080px, 1vmin就等于8px, 1vmax则未10.8px。
那么问题来了，我们应该在什么场景下使用这两个单位呢？
假设有一个元素，你需要让它始终在屏幕上可见。只要对其高度和宽度使用vmin单位，并赋予其低于100的值就可以做到了。再来个栗子，可以这样定义一个至少有两个边触摸到屏幕的方形：
.box{
width:100vmin;
height:100vmin;
}
如果你要让这个方形框框始终铺满整个视口的可见区域（四边始终触摸到屏幕的四边）
.box{
width:100vmax;
height:100vmax;
}
百分比布局
html, body { height: 100%; }
.sidebar {
height: 100%;
width: 100%;
}
为什么html和body需要高度？百分比是相对于其父属性。当父级的高度由它的子级定义时，没有已知的高度设置，因此高度被完全忽略。这意味着你必须在DOM树中的每个父元素上设置高度。你也可以使用新的**视口单位**。
注：IE9使用vm代替vmin。它不支持vmax。
澄清：1vmax等于1vh在纵向模式，而在横向模式下，1vmax将等于1vw。
个人建议：使用视口给元素设置宽高时，为了避免比例不协调，使用同一个单位比较好，如vmin、vmax。
