移動端開發,幾個你可能不知道的CSS單位屬性。


1. rem

"em" 單位是我們開發中比較常用到的,它表示以當前元素的父元素的單位大小為基准來設置當前元素的大小;“rem” 中的 “r” 代表 “root”,它表示以(即“html”)元素的單位大小為基准來設置當前元素的單位大小,所以不管當前元素是任意子節點,一旦設單位大小為 “rem” 那么這個元素大小都是以根元素單位為參考的,這里的 “em” 和 “rem” 均具有繼承性

2. vwvh(移動端開發個人最喜歡的單位屬性,也是這次介紹的重點)

傳統的響應式開發中,我們常常用百分比來布局,然而這並不是最好的解決方案。例如,你沒有辦法以body的高度來設置百分比。

"vw" 的全稱是 “viewport width” 即視窗的寬度;"vh" 的全稱是 “viewport height” 即視窗的高度。

1vw = viewportWidth * 1/100; 1vh = viewportHeight * 1/100;

所以元素使用 “vw” “vh” 作為寬度和高度單位,即可以保證適配不同的設備。

3. vmin 和 vmax

vmin” 即 “viewport” 寬度和高度相比較最小的那一個。(也就是說,如果當前元素單位設置了 “vmin” 那么瀏覽器會去判斷寬度和高度的大小,然后繼承小的值

vmax” 同理,繼承寬高比較,大的那一個值;即,寬和高誰大,就繼承誰的值。

這里我們假設:瀏覽器的寬度為1300px,高度為960px;

50vmin = 960 * (50/100);
50vmax = 1300 * (50/100);

4. ex 和 ch

這兩個單位在我們平時開發中會很少用到,這里就不做詳細的闡述了。下面就放一張圖解釋這兩個單位的含義,若是有興趣的朋友的可以自己查一下資料。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM