先介紹一下vh:相對於視窗的高度，那么vw:則是相對於視窗的寬度
“視區”所指為瀏覽器內部的可視區域大小，即window.innerWidth/window.innerHeight大小，不包含任務欄標題欄以及底部工具欄的瀏覽器區域大小。
vh
vh就是當前屏幕可見高度的1%，也就是說
height:100vh == height:100%;
但是有個好處是當元素沒有內容時候，設置height:100%該元素不會被撐開，
但是設置height:100vh，該元素會被撐開屏幕高度一致。
vw
vw就是當前屏幕寬度的1%
補充一句，當設置width:100%，被設置元素的寬度是按照父元素的寬度來設置，
但是100vw是相對於屏幕可見寬度來設置的，所以會出現50vw 比50%大的情況
calc
但是在寫單位的時候在前面還有一個calc，這個又拿來做什么呢？
calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能，用來指定元素的長度。比如說，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設置動態值。為何說是動態值呢?因為我們使用的表達式來得到的值。不過calc()最大的好處就是用在流體布局上，可以通過calc()計算得到元素的寬度。
calc同時還可以進行運算的方式：
需要注意的是，運算符前后都需要保留一個空格，例如：width: calc(100% - 10px)；
任何長度值都可以使用calc()函數進行計算；
calc()函數支持 “+”, “-“, “*”, “/” 運算；
calc()函數使用標准的數學運算優先級規則；
calc(100vh - 10px) 表示整個瀏覽器窗口高度減去10px的大小
calc(100vw - 10px) 表示整個瀏覽器窗口寬度減去10px的大小
這樣我們在寫移動端，不好確定固定值的時候，就比較方便，一些特殊的布局就比較好編寫。使用下來也比較方便，相對寬度的最大和最小的設置，height:calc(100vh)的寫法確實很方便，在弄移動端的側欄時候，我需要一個背景，在設置這個背景的時候height:100%總是存在一些問題，如果是js 去獲取手機的視圖高度，感覺代碼太多，用來下height:calc(100vh)就能解決這個問題。