移動(dòng)端字體單位有哪些？

他們的兼容性如何？

他們的特點(diǎn)？

?

?

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

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

?

?

em:

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

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

em的值并不是固定的。

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

所以我們?cè)趯慍SS的時(shí)候，需要注意以下幾點(diǎn)：

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

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

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

rem:

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

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

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

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

px:

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

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

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

?

?

總結(jié)：

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

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

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

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

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

總結(jié)

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

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