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

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》）