初識vw和vh
最近在專案裡突然看到了一行css程式碼，height:100vh; 一時間有點矇蔽
因為之前有聽過這個css3新增單位，但沒有去了解過。
那這個單位又跟rem，em有什麼不同呢？
簡述：
rem： 相對長度單位，表示根元素（即html元素）設定html的font-size，html {font-size: 16px;} ，即 1rem = 16px;
比如你給一個div設定寬高為32px，相當於 width: 2rem; height: 2rem;
em： 相對長度單位，不過em是根據父元素的font-size來進行轉變的
比如下面程式碼父元素.parent字型大小為12px，子元素.son的寬高為1rem（即：1rem = 12px;）
<div class="parent" style="font-size: 12px;"> <div class="son" style="width: 1rem;height: 1rem;"></div> </div>
vw,vh：官方描述是相對於視口的寬度和高度，視口被均分為100單位的vw，vh
視口：如果在PC端，是指瀏覽器的可視區域；如果在移動端，可以簡單理解為手機螢幕區域
上面簡單解釋了什麼是vw，wh和什麼是視口。那這個單位到底是怎麼計算的呢？
這裡有一個公式：視口 * 你想設定的數值 / 100
這裡的視口用 iphone5，iphone6，iphone6 Plus舉例
iphone5 320 * 568
iphone6 375 * 667
iphone6 Plus 414 * 736
假如你給一個div設定寬高為width:5vw; height:5vh; 然後按F12，選擇裝置iphone5檢視
這個時候通過上面的公式可計算出 1vw,1vh是多少
320 * 5 / 100 = 16px ，即：1vw = 16px;
568 * 5 / 100 = 28.4px ，即：1vh = 28.4px;
注：其實這裡的視口指的就是手機裝置的css畫素，比如上面列出的 iphone5 css畫素 320 *568
可能大家還是有點矇蔽，可以試一試下面的demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>VW&VH</title> </head> <style> * { padding: 0; margin: 0 } .left { float: left; width: 50vw; height: 20vh; background-color: blue; text-align: center; line-height: 20vh; font-size: 3rem } .right { float: right; width: 50vw; height: 20vh; background-color: green; text-align: center; line-height: 20vh; font-size: 3rem } </style> <body> <div class="left">left</div> <div class="right">right</div> </body> </html>
參考：https://www.cnblogs.com/luxiaoxing/p/7544375.html