CSS：如何使用 px、em、rem？

1. 三種單位詳解

1.1 px（像素 Pixel ）

相對長度單位。像素 px 是相對於顯示器屏幕分辨率而言的。

利用 px 設置字體大小及元素寬高等比較穩定和精確。Px 的缺點是其不能適應瀏覽器縮放時產生的變化，所以通常不用於響應式網站。

1.2 em

相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸（通常爲16px）。

1.2.1 瀏覽器默認16px

如圖，h1 字體大小設置爲1.5em，最終字體大小爲 1.5*16px (通常瀏覽器默認字體尺寸)=24px，可在 computed 中查看最終字體大小。

1.2.2 font-size 繼承特性

使用 em 能夠較好的相應設備屏幕尺寸的變化，可是在進行元素設置時須要知道父元素文本的 font-size 及當前對象內文本的 font-size，若有遺漏可能會致使錯誤。

如圖，若父元素 div 設置 font-size 爲20px，子元素 h1 最終字體大小爲1.2161.5 = 30px。

這種狀況 h1 的字體大小計算不只要考慮自身的大小，還要繼承父元素的字體大小，父元素還可能繼承其父元素大小等等，em爲單位的元素字體大小可能會受到其任何父元素的字體大小影響，計算複雜。

1.2.3 margin和padding

em 除了能夠用來指定 font-size，還能夠用來設置 margin 和 padding 大小。

h1{font-size:20px;padding:1em}
p{font-size:10px;margin:2em}
複製代碼

h1 的 padding 爲 1*20px = 20px。

p 的 margin 按道理應爲 210px = 20px，但實際爲 212px = 24px，緣由是示例採用的 chrome 瀏覽器，默認最小字體爲12px.

3. rem（root rem）

rem 是 CSS3 新增的一個相對單位（root em，根 em）。與 em 的區別在於使用 rem 爲元素設定字體大小時，仍然是相對大小，但相對的只是 HTML 根元素。

rem 的產生是爲了幫助人們解決 em 所帶來的計算問題。經過它既能夠作到只修改根元素就成比例地調整全部字體大小，又能夠避免字體大小逐層複合的連鎖反應。

目前，除了 IE8 及更早版本外，全部瀏覽器均已支持 rem。對於不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用 rem 設定的字體大小。以下：

p {font-size:14px; font-size:.875rem;}
複製代碼

以 rem 爲單位的字體大小或 padding\margin 等大小只與 HTML 根元素大小有關，與元素自己字體大小無關。

如圖，h1 的 padding 以 rem 爲單位，HTML 根元素大小爲16px，則 h1 的 paddin g爲 1*16 = 16px。

2. 應用場景

2.1 通用準則

px：必須使用固定值防止被縮放的元素，若被縮放，結構會被打碎。

em：優勢在於組件模塊化，缺點在於計算複雜。

rem：優勢在於能夠作到避免字體大小逐層複合的連鎖反應，缺點在於使組件缺乏模塊化；使用rem的主要目的是確保不管用戶如何設置本身的瀏覽器字體大小，佈局都能調整到合適大小。

注意：在建立佈局時，採用 px 爲單位更加方便，而部署時應該用 rem 單位；多列布局時，列寬可以使用%。

2.2 em與rem

em 和 rem 都各有優缺點，綜合使用它們以幫助咱們更簡單的創建模塊化組件，實現自適應佈局。

1. 若是屬性值根據元素的 font-size 得到，則使用 em，如padding\margin\line-height\width\height 等值（使字體大小變化時元素周圍的間距會等比例縮放）

2. 其餘一切單位使用 rem