今天在做后台项目的时候，发现了一个单位 vh,妈呀，这是个什么鬼，没有接触过，虽然说还是个菜鸟但是一般的单位还是知道一二的，这个直接懵逼，后来上网查了下，觉得有必要把他记录下来，有助于自己后来翻找，vh与vw是一个根据视区来决定大小的单位，“视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。
这里借鉴张鑫旭大神的一个demo http://www.zhangxinxu.com/study/201209/vw-vh-to-pixel.html 需要了解的可以看下,网页视区宽度（window.innerWidth），浏览器的宽度(window.outerWidth)，显示器的宽度 (screen.Width),
也就是说如果把父元素高度设为100vh，此时父元素就会占满这个屏幕，1vh,1vw 等于屏幕可见区域的高度，宽度的1%，我们知道height：100%，但是如果子元素不能撑开父元素，父元素是没有高度的，但是100vh就可以，如果想占满屏幕，就要100vh或者100vw,
<div style="width:100vw,height:100vh">
<img src="XXXX" style="width:50vw,height:50vh"/>img 的大小跟着屏幕视区大小而变化
</div>
然后简单介绍下rem 与em
em是根据父元素的大小乘相应的倍数
<div style="font-size:'20px'"><p style="font-size:1.5em">此时的字体大小是30px<span style="font-size:1.5em">此时的字体大小是45px</span></p></div>
rem r就是root意思，始终跟着body的字体大小变动，不跟随父元素改动而改动
<body style="font-size:10px">
<div style="font-size:2rem">此时的字体大小是20px</div><span style="font-size:4rem">此时的字体大小是40px</span>
</body>
