CSS單位：px、em、rem

Lucky_Boy 發(fā)布于2019-08-29 12:22 / 941人閱讀

摘要：在平時(shí)的工作當(dāng)中，我發(fā)現(xiàn)自己大多數(shù)時(shí)候是用來(lái)作為字體單位的，不僅如此，其實(shí)公司的所有前端項(xiàng)目都是以作為字體單位的。我們知道像素作為相對(duì)長(zhǎng)度單位是相對(duì)于顯示器的分辨率而言的。很好地解決了的字體大小從父元素繼承所帶來(lái)的不便。

在平時(shí)的工作當(dāng)中，我發(fā)現(xiàn)自己大多數(shù)時(shí)候是用px來(lái)作為CSS字體單位的，不僅如此，其實(shí)公司的所有前端項(xiàng)目都是以px作為CSS字體單位的。我們知道px（像素）作為CSS相對(duì)長(zhǎng)度單位是相對(duì)于顯示器的分辨率而言的。它的特點(diǎn)是穩(wěn)定、精確、瀏覽器兼容性好，但是對(duì)應(yīng)的，在Web頁(yè)面中使用px作為字體的單位時(shí)也有它的問(wèn)題，比如當(dāng)用戶試圖調(diào)整瀏覽器的默認(rèn)字體大小時(shí)，由于px是固定大小的，所以再怎么調(diào)整對(duì)應(yīng)頁(yè)面上字體的大小都是不會(huì)變的。

于是為了解決上面提到的px作為字體單位的類(lèi)似問(wèn)題，又引入了一個(gè)新的CSS字體單位em，em作為字體單位也是一個(gè)相對(duì)長(zhǎng)度單位，它相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體大小，若當(dāng)前對(duì)象內(nèi)文本的字體大小未被設(shè)置，則采用瀏覽器默認(rèn)的字體大小。

任意瀏覽器的默認(rèn)字體大小都是16px，所以在瀏覽器字體大小保持默認(rèn)的狀態(tài)下：1em = 16px，那么1px = 1 / 16 = 0.0625em，10px = 0.625em，同理12px = 0.0625 x 12 = 0.75em，14px = 0.0625 x 14 = 0.875em。

但是如果每次都要去進(jìn)行對(duì)應(yīng)的px值到em值得計(jì)算的話，想必會(huì)大大降低開(kāi)發(fā)效率，為了簡(jiǎn)化px到em的值轉(zhuǎn)換，可以在CSS中聲明body的字體大小為62.5%，即body {font-size: 62.5%}，這樣一來(lái)，1em = 16px * 62.5% = 10px，那么對(duì)應(yīng)的12px = 1.2em，14px = 1.4em，這樣換算起來(lái)就簡(jiǎn)單的多了。

但是像上面這樣還是有一個(gè)問(wèn)題，就是em作為字體單位是會(huì)繼承父元素字體大小的，上面的計(jì)算是假設(shè)所有元素的字體大小都以body的字體大小作為繼承基準(zhǔn)，然而實(shí)際的情況往往都不是這樣的。舉一個(gè)例子，如下DOM結(jié)構(gòu)：


    
        
            導(dǎo)航菜單1
            我是一段測(cè)試文字

在默認(rèn)情況下，我們期望標(biāo)簽下面的字體大小應(yīng)該為1.2em也就是12px，標(biāo)簽下面的字體大小為1em也就是10px，但實(shí)際像上面這樣我們得到的最終結(jié)果是標(biāo)簽下面的字體大小為1.2 x 1.2 = 1.44em = 14.4px，標(biāo)簽下面的字體大小為1.2 x 1 = 1.2em = 12px，這個(gè)就是因?yàn)閑m作為字體單位會(huì)繼承父元素的字體大小，在本例中，由于給父元素

設(shè)置了字體大小為1.2em，所以瀏覽器在計(jì)算標(biāo)簽和標(biāo)簽的字體大小時(shí)就是上面實(shí)際所得到的結(jié)果。

這樣一來(lái)其實(shí)em真正的計(jì)算公式就是：1 ? 當(dāng)前父元素的font-size x 需要轉(zhuǎn)換的像素值 = em值，就不是單純地每次都去除以16px了，顯然這種繼承的方式在開(kāi)發(fā)時(shí)會(huì)帶來(lái)極大的不便。

rem

為了解決上面提到的em字體大小繼承問(wèn)題，又誕生出了一個(gè)新的CSS字體大小單位：rem，即 “root em”，它在字體大小與px進(jìn)行換算時(shí)與em有著同樣的換算規(guī)則，但唯一不同的是，rem只會(huì)以根元素的字體大小作為換算基準(zhǔn)，而不會(huì)每次都從自己當(dāng)前的父元素那里繼承，在Web頁(yè)面中根元素就是，它的字體大小就是瀏覽器當(dāng)前所設(shè)置的字體大小，默認(rèn)情況下就是16px。

這樣一來(lái)，按照上面提到的轉(zhuǎn)換規(guī)則，還是上面的例子，把賦值給，即，所有的單位改成rem，就可以得到我們的期望結(jié)果：標(biāo)簽下面的字體大小應(yīng)該為1.2rem也就是12px，標(biāo)簽下面的字體大小為1rem也就是10px（此處只講述原理，假設(shè)忽略瀏覽器的最小字體大小限制）。

rem很好地解決了em的字體大小從父元素繼承所帶來(lái)的不便。

瀏覽器兼容性

rem是CSS 3當(dāng)中引入的單位，支持的瀏覽器有：Mozilla Firefox 3.6+、Apple Safari 5.0+、Google Chrome、IE9+和Opera11+，在現(xiàn)代瀏覽器或移動(dòng)端，我們可以放心地使用rem來(lái)作為字體大小單位，但是如果你想使用rem這個(gè)單位，又想兼容低版本的IE瀏覽器，可以考慮px和rem同時(shí)使用，用px兼容低版本IE的效果，用rem實(shí)現(xiàn)現(xiàn)代瀏覽器的效果。