尺寸單位em,rem,vh,vw
阿新 • • 發佈:2018-12-23
這幾天做demo,看了網上教程有用到尺寸單位vh,vw, 這些單位不是很熟悉,所以上網上找了些資料來認識了這些不認識的單位
1.em
在做手機端的時候經常會用到的做字型的尺寸單位
說白了 em就相當於“倍”,比如設定當前的div的字型大小為1.5em,則當前的div的字型大小為:當前div繼承的字型大小*1.5
但是當div進行巢狀的時候,em始終是按照當前div繼承的字型大小來縮放,參照後面的例子。
2.rem
這裡的r就是root的意思,意思是相對於根節點來進行縮放,當有巢狀關係的時候,巢狀關係的元素的字型大小始終按照根節點的字型大小進行縮放。
參照後面給的demo
3.vh
vh就是當前螢幕可見高度的1%,也就是說
height:100vh == height:100%;
但是有個好處是當元素沒有內容時候,設定height:100%該元素不會被撐開,
但是設定height:100vh,該元素會被撐開螢幕高度一致。
4.vw
vw就是當前螢幕寬度的1%
補充一句,當設定width:100%,被設定元素的寬度是按照父元素的寬度來設定,
但是100vw是相對於螢幕可見寬度來設定的,所以會出現50vw 比50%大的情況
最後說一句,以上這些尺寸都是css3中的尺寸單位
低版本的ie就不支援了
沒看懂的同學可以參考這裡的一個demo
複製貼上儲存成index.html即可在瀏覽器檢視。
祝大家春節快樂!
<!DOCTYPE html> <html lang="Zh-cn"> <head> <meta charset="UTF-8"> <title>恭賀新春</title> </head> <style type="text/css" media="screen"> html{ font-size: 14px; } .em, .em > .em-son, .em > .em-son > .em-grandson { font-size: 1.2em; } .rem, .rem > .rem-son, .rem > .rem-son > .rem-grandson { font-size: 1.2rem; } .rem-box { background: #d60b3b; width:10rem; height: 10rem; color: #fff; text-align: center; line-height:5rem; } .vhvw-box { background: #d60b3b; width:50vw; height: 50vh; color: #fff; text-align: center; line-height:25vh; } </style> <body> <h1>em 繼承父元素的字型大小,來變大或變小,多層巢狀字型變化</h1> <div class="em"> 字型大小 1.2 * 14(父元素body) = 16px <div class="em-son"> 字型大小 1.2 * 16(父元素em) = 20px <div class="em-grandson"> 字型大小 1.2 * 20(父元素em-son) = 24px </div> </div> </div> <br> <h1>rem 繼承根節點元素的字型大小,來變大或變小,多層巢狀字型不變化</h1> <div class="rem"> 字型大小 1.2 * 14(根節點html) = 16px <div class="rem-son"> 字型大小 1.2 * 14(根節點html) = 16px <div class="rem-grandson"> 字型大小 1.2 * 14(根節點html) = 16px </div> </div> </div> <br> <h1>rem 也可作為固定長度單位設定寬高等</h1> <div class="rem-box"> 寬:14 * 10 = 140px<br> 高:14 * 10 = 140px </div> <br> <h1>vh,vw 螢幕可見區域的高度,寬度的1%</h1> <div class="vhvw-box"> 寬:螢幕寬度的50%<br> 高:螢幕高度的50% </div> </body> </html>