移動端字體單位有哪些？

他們的兼容性如何？

他們的特點？

?

?

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

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

?

?

em:

em是相對長度單位。相對于父元素設置的字體大小。

em相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸。(引自CSS2.0手冊)

em的值并不是固定的。

em會繼承父級元素的字體大小。例如 父元素div 的字體設置為16px 那么div中的字元素p標簽或者其他標簽的1em 就相當于16px。

所以我們在寫CSS的時候，需要注意以下幾點：

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，這是不是就簡單多了，準確多了呢~~)

將你的原來的px數值除以10，然后換上em作為單位；

重新計算那些被放大的字體的em數值。避免字體大小的重復聲明。也就是避免1.2 * 1.2= 1.44的現象。比如說你在#content中聲明了字體大小為1.2em，那么在聲明p的字體大小時就只能是1em，而不是1.2em, 因為此em非彼em，它因繼承#content的字體高而變為了1em=12px。

rem:

rem是CSS3新增的一個相對單位（root em，根em），這個單位引起了廣泛關注。

這個單位與em有什么區別呢？區別在于使用rem為元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。

這個單位可謂集相對大小和絕對大小的優點于一身，通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。

在這里為大家提供一個px,em,rem單位轉換工具傳送門

px:

px像素（Pixel）。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。(引自CSS2.0手冊)

IE無法調整那些使用px作為單位的字體大小；

Firefox能夠調整px和em，rem，但是多數的中國網民使用IE瀏覽器(或內核)。

?

?

總結：

在移動端你可以根據你的項目來決定使用px em 或者rem（前提是你知道他們的特點）

如果使用rem的話那么改版更加容易只需要修改跟元素的字體大小整個dom樹上的元素的字體大小都會改變

不建議使用em 因為em 會繼承父親元素的字體，不熟練的人會造成字體大小失控的問題

不管是用em rem 還是px 都不會跟隨手機瀏覽器大小的改變而改變都需要進行額外的操作（比如 media 或者js計算跟元素大小《適用于rem》）

轉載于:https://www.cnblogs.com/ling-du/p/5733838.html

總結

以上是生活随笔為你收集整理的移动端系列讲解之字体单位的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。