初識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