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

標籤：

1. rem

"em" 單位是我們開發中比較常用到的，它表示以當前元素的父元素的單位大小為基準來設定當前元素的大小；“rem” 中的 “r” 代表 “root”，它表示以根（即“html”）元素的單位大小為基準來設定當前元素的單位大小，所以不管當前元素是任意子節點，一旦設單位大小為 “rem” 那麼這個元素大小都是以根項目單位為參考的，這裡的 “em” 和 “rem” 均具有繼承性。

2. vw 和 vh（移動端開發個人最喜歡的單位屬性，也是這次介紹的重點）

傳統的響應式開發中，我們常常用百分比來布局，然而這並不是最好的解決方案。例如，你沒有辦法以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

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

 

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