em和rem 單位的使用

em和rem

px、em和rem三者的關係

1.px

概念：畫素。相對長度的單位。

特點：所有瀏覽器均支援

2.em

概念：是長度的相對單位。

特點：em的值不是固定的、會繼承父級元素的字型大小。相對父級的的字型大小。

3.rem

概念：css3新增的單位，長度的相對單位，以html元素的字型單位做參考。

em的用法

由於em會繼承父級元素的字型，所以多級使用em會出現，情況會變得棘手，會使得畫素的單位計算變得複雜。

例項demo：

祖先爺爺父親

兒子

.parents .parent

.father

rem 的用法

rem是css3新增的相對單位，但與 em 的區別在於相對的參考物件。em是相對其父級元素的字型大小，而rem是相對 html 的字型大小，因此rem相對靈活，參考物件都一致為 html元素的字型大小。

例項demo：

祖先爺爺父親

兒子

html .parents .parent

.father

移動端的適配問題

在移動端，能使用百分比的盡可能使用百分比，也可通過設定html的字型來適配，可通過瀏覽器的寬度動態計算 html 的字型大小。

為了方便計算，一般採用設計稿的寬度畫素w/10 px 作為html的字型大小。譬如，移動設計稿為 750 x *,可進行html的字型設定為75px。這樣的話， 1rem = 75px。

也有些時候，前端開發者，會利用瀏覽器預設字型 16px。通過設定html元素的字型大小為 16px * 62.5% = 10px (即 font-size = 10px, 1rem = 10px);

需要注意的：

在瀏覽器中，html允許的最小字型大小不同，chrome瀏覽器允許字型最小 font-size: 12px;也就是說，html的字型最小為12px,當html的font-size<12px；1rem = 12px；10rem = 120px;

為了避免這種情況，動態改變html的字型大小來實現移動端適配，我們盡可能將html的字型大小設定大一點，譬如瀏覽器的可視區域寬度為 400px, 可進行設定html元素的font-size:40px (即 1rem = 40px) ;

什麼情況使用em、rem、px和百分比

1. 佔滿全屏的元素寬度可設定 100%

2. pc和移動端字型大小相差很大的字型可利用rem設定字型大小