今天在做后臺項目的時候，發現了一個單位 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>
