rem em 与vh vw的用法简单介绍

今天在做后台项目的时候，发现了一个单位 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,

img 的大小跟着屏幕视区大小而变化

然后简单介绍下rem 与em 

em是根据父元素的大小乘相应的倍数 

此时的字体大小是30px此时的字体大小是45px

rem  r就是root意思，始终跟着body的字体大小变动，不跟随父元素改动而改动

此时的字体大小是20px

此时的字体大小是40px