摘要：
由于现在移动设备的屏幕尺寸之差别，如果仍然根据屏幕的物理分辨率来设计网页，效果很难统一，因此html5和css3引入视口的概念来代替显示器的物理尺寸。通过在meta标签上的设置，视口的长宽可以跟设备的物理分辨率相等，也可以不相等，可根据需要灵活掌握。在PC端中，视口的长宽则是跟浏览器窗口的物理分辨率相等的。
一、vh vw
vw和vh是相对于视口（viewport）的宽度和高度。由于现在移动设备的屏幕尺寸之差别，如果仍然根据屏幕的物理分辨率来设计网页，效果很难统一，因此html5和css3引入视口的概念来代替显示器的物理尺寸。通过在meta标签上的设置，视口的长宽可以跟设备的物理分辨率相等，也可以不相等（以便手机上可以实现用两个手指来放大会缩小页面），可根据需要灵活掌握。在PC端中，视口的长宽则是跟浏览器窗口的物理分辨率相等的。
1vw等于视口宽度（viewport width）的百分之一，也就是说100vw就是视口的宽度；
1vh等于视口高度（viewport height）的百分之一。
（字体也可以设置）
二、应用
解决父级无高 ,设置自身固定高值又不能兼容所有设备，设置百分比无效，此时用vw设置可完美解决，兼容各种设备。
（不完全解析，深入探索推荐：http://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/）