移動端系列講解之字體單位

1. 移動端字體單位有哪些？
2. 他們的兼容性如何？
3. 他們的特色？

 

 

1.移動端字體單位如今主要有 em 、rem 、px

2.兼容性請傳送點擊這裏

 

 

em:

1. em是相對長度單位。相對於父元素設置的字體大小。
2. em相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。(引自CSS2.0手冊)
3. em的值並非固定的。
4. em會繼承父級元素的字體大小。例如 父元素div 的字體設置爲16px 那麼div中的字元素p標籤或者其餘標籤的1em 就至關於16px。

因此咱們在寫CSS的時候，須要注意如下幾點：

1. body選擇器中聲明Font-size=62.5%；(爲何恰恰是62.5%呢？這主要是爲了方便em與px相互轉換，em的初始值爲1em=16px，顯然這樣的話，如1.2em則=19.2px，但是咱們在設置的時候不多看見19.2px這樣表示的大小，也就是在用px表示大小時數值是不帶小數位的。當設置了body{font-size: 62.5%;}時，1em則=16px*62.5%=10px,1.2em則=12px，這是否是就簡單多了，準確多了呢~~)
2. 將你的原來的px數值除以10，而後換上em做爲單位；
3. 從新計算那些被放大的字體的em數值。避免字體大小的重複聲明。也就是避免1.2 * 1.2= 1.44的現象。好比說你在#content中聲明瞭字體大小爲1.2em，那麼在聲明p的字體大小時就只能是1em，而不是1.2em, 由於此em非彼em，它因繼承#content的字體高而變爲了1em=12px。

rem:

1. rem是CSS3新增的一個相對單位（root em，根em），這個單位引發了普遍關注。
2. 這個單位與em有什麼區別呢？區別在於使用rem爲元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。
3. 這個單位可謂集相對大小和絕對大小的優勢於一身，經過它既能夠作到只修改根元素就成比例地調整全部字體大小，又能夠避免字體大小逐層複合的連鎖反應。
4. 在這裏爲你們提供一個px,em,rem單位轉換工具傳送門

px:

1. px像素（Pixel）。相對長度單位。像素px是相對於顯示器屏幕分辨率而言的。(引自CSS2.0手冊)
2. IE沒法調整那些使用px做爲單位的字體大小；
3. Firefox可以調整px和em，rem，可是多數的中國網民使用IE瀏覽器(或內核)。

 

 

總結：

1. 在移動端你能夠根據你的項目來決定使用px em 或者rem（前提是你知道他們的特色）
2. 若是使用rem的話那麼改版更加容易只須要修改跟元素的字體大小整個dom樹上的元素的字體大小都會改變
3. 不建議使用em 由於em 會繼承父親元素的字體，不熟練的人會形成字體大小失控的問題
4. 不論是用em rem 仍是px 都不會跟隨手機瀏覽器大小的改變而改變都須要進行額外的操做（好比 media 或者js計算跟元素大小《適用於rem》）