移動端字體單位有哪些？

他們的兼容性如何？

他們的特點(diǎn)？

?

?

1.移動端字體單位現(xiàn)在主要有 em 、rem 、px

2.兼容性請傳送點(diǎn)擊這里

?

?

em:

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

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

em的值并不是固定的。

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

所以我們在寫CSS的時候，需要注意以下幾點(diǎn)：

body選擇器中聲明Font-size=62.5%；(為什么偏偏是62.5%呢？這主要是為了方便em與px相互轉(zhuǎn)換，em的初始值為1em=16px，顯然這樣的話，如1.2em則=19.2px，可是我們在設(shè)置的時候很少看見19.2px這樣表示的大小，也就是在用px表示大小時數(shù)值是不帶小數(shù)位的。當(dāng)設(shè)置了body{font-size: 62.5%;}時，1em則=16px*62.5%=10px,1.2em則=12px，這是不是就簡單多了，準(zhǔn)確多了呢~~)

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

重新計(jì)算那些被放大的字體的em數(shù)值。避免字體大小的重復(fù)聲明。也就是避免1.2 * 1.2= 1.44的現(xiàn)象。比如說你在#content中聲明了字體大小為1.2em，那么在聲明p的字體大小時就只能是1em，而不是1.2em, 因?yàn)榇薳m非彼em，它因繼承#content的字體高而變?yōu)榱?em=12px。

rem:

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

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

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

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

px:

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

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

Firefox能夠調(diào)整px和em，rem，但是多數(shù)的中國網(wǎng)民使用IE瀏覽器(或內(nèi)核)。

?

?

總結(jié)：

在移動端你可以根據(jù)你的項(xiàng)目來決定使用px em 或者rem（前提是你知道他們的特點(diǎn)）

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

不建議使用em 因?yàn)閑m 會繼承父親元素的字體，不熟練的人會造成字體大小失控的問題

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

轉(zhuǎn)載于:https://www.cnblogs.com/ling-du/p/5733838.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。