CSS長度單位詳解

長度單位可以總體的分為絕對長度單位和相對長度單位。css中最為大家熟知的無疑是px和em，但與此同時還存在pt, rem, vw, vh等其他計量單位，使用好它們可以大大增長我們的開發效率。本篇文章試圖整理在前端開發中用到的css單位和其應用場景。

px是pixel縮寫，是基於畫素的單位。在瀏覽網頁過程中，螢幕上的文字、等會隨螢幕的解析度變化而變化，乙個100px寬度大小的，在800×600解析度下，要佔螢幕寬度的1/8，但在1024×768下，則只佔約1/10。所以如果在定義字型大小時，使用px作為單位，那一旦使用者改變顯示器解析度從800到1024，使用者實際看到的文字就要變「小」（自然長度單位），甚至會看不清，影響瀏覽。

pt就是point，是印刷行業常用單位，等於1/72英吋。pt全稱為point，但中文不叫「點」，確切的說法是乙個專用的印刷單位「磅」，大小為1/72英吋，是乙個絕對長度單位。

em單位是指其正在使用的字型大小。

在乙個頁面上給定乙個父元素的字型大小,這樣就可以通過調整乙個元素來成比例的改變所有元素大小.它可以自由縮放,比如用來製作可伸縮的樣式表。

此處有乙個關於【繼承】的點需要注意：使用em設定寬高行高等屬性的元素，其子元素繼承的並不是em，而是其計算之後的值，這一點與使用百分號相同。而不新增單位，其子元素則繼承的是百分比，子元素會根據其自身的字型大小計算得出對應屬性值。具體看下面例子：

<
div 
style
="line-height:1.5em;font-size:16px;background-color:yellow;"
>
父元素內容    
<
div 
style
="font-size:40px;background-color:red"
>
web前端開發   
div>
div>

當使用em時，最外層父元素的行高是1.5*16px=24px，同時其子元素繼承了該line-height，效果圖如下：

可以看出由於40px>24px，所以字型「溢位」了。而當不新增單位時：

<
div 
style
="line-height:1.5;font-size:16px;background-color:yellow;"
>
父元素內容    
<
div 
style
="font-size:40px;background-color:red"
>
web前端開發   
div>
div>

效果如下：

其行高會跟隨自身字型大小進行計算，繼承的只是「比例"。

rem是指根元素（root element）的字型大小，它會隨著父元素的字型大小變化而變化，減少了父子元素之間字型大小計算的複雜程度。由於根源素的預設字型大小是16px，為了方便計算，我們可以進行如下設定：

htmlh1

ie9+ 和現代瀏覽器都已經支援了。

萌の宇 – mobile h5布局大全-rem flexbox詳解

flexbox——快速布局神器_flexbox, css3, layout 教程_w3cplus

vh等於viewport高度的1/100。例如，如果瀏覽器的高是900px,1vh求得的值為9px。同理，如果顯示視窗寬度為750px,1vw求得的值為7.5px。當我們想設定跟隨視口變化的字型，或是填滿整個螢幕的div時，這個單位是非常有用的。

ie10＋和現代瀏覽器都支援這兩個單位。

vh和vm總是與視口的高度和寬度有關，與之不同的，vmin和vmax是與這次寬度和高度的最大值或最小值有關，取決於哪個更大和更小。例如，如果瀏覽器設定為1100px寬、700px高，1vmin會是7px，1vmax為11px。然而，如果寬度設定為800px，高度設定為1080px，1vmin將會等於8px而1vmax將會是10.8px。

ie10+ 和現代瀏覽器都已經支援vmin，webkit瀏覽器之前不支援vmax，現在已經支援，所有現代瀏覽器已經支援，但是ie全部不支援vmax。

ex和ch的單位長度，依賴於特殊字元：

當font-family改變的時候這兩個單位的值也會變化，不同字型表現的樣式不一樣。ie9+ 和現代瀏覽器都已經支援。

參考：7 css units you might not know about

你可能沒注意到的css單位

CSS長度單位詳解

css 長度單位

常用CSS長度單位

CSS的長度單位

CSS長度單位詳解

css 長度單位

常用CSS長度單位

CSS的長度單位

相關推薦