CSS單位：px、em、rem

時間 2019-12-12

標籤 css 單位 rem 欄目 CSS 简体版

原文原文鏈接

px

在平時的工做當中，我發現本身大多數時候是用px來做爲CSS字體單位的，不只如此，其實公司的全部前端項目都是以px做爲CSS字體單位的。咱們知道px（像素）做爲CSS相對長度單位是相對於顯示器的分辨率而言的。它的特色是穩定、精確、瀏覽器兼容性好，可是對應的，在Web頁面中使用px做爲字體的單位時也有它的問題，好比當用戶試圖調整瀏覽器的默認字體大小時，因爲px是固定大小的，因此再怎麼調整對應頁面上字體的大小都是不會變的。html

em

因而爲了解決上面提到的px做爲字體單位的相似問題，又引入了一個新的CSS字體單位em，em做爲字體單位也是一個相對長度單位，它相對於當前對象內文本的字體大小，若當前對象內文本的字體大小未被設置，則採用瀏覽器默認的字體大小。前端

任意瀏覽器的默認字體大小都是16px，因此在瀏覽器字體大小保持默認的狀態下：1em = 16px，那麼1px = 1 / 16 = 0.0625em，10px = 0.625em，同理12px = 0.0625 x 12 = 0.75em，14px = 0.0625 x 14 = 0.875em。瀏覽器

可是若是每次都要去進行對應的px值到em值得計算的話，想必會大大下降開發效率，爲了簡化px到em的值轉換，能夠在CSS中聲明body的字體大小爲62.5%，即body {font-size: 62.5%}，這樣一來，1em = 16px * 62.5% = 10px，那麼對應的12px = 1.2em，14px = 1.4em，這樣換算起來就簡單的多了。測試

可是像上面這樣仍是有一個問題，就是em做爲字體單位是會繼承父元素字體大小的，上面的計算是假設全部元素的字體大小都以body的字體大小做爲繼承基準，然而實際的狀況每每都不是這樣的。舉一個例子，以下DOM結構：字體

<body style="font-size:62.5%">
    <ul>
        <li style="font-size:1.2em">
            <a href="#" style="font-size:1.2em">導航菜單1</a>
            <span style="font-size:1em">我是一段測試文字</span>
        </li>
    </ul>
</body>

在默認狀況下，咱們指望<a>標籤下面的字體大小應該爲1.2em也就是12px，<span>標籤下面的字體大小爲1em也就是10px，但實際像上面這樣咱們獲得的最終結果是<a>標籤下面的字體大小爲1.2 x 1.2 = 1.44em = 14.4px，<span>標籤下面的字體大小爲1.2 x 1 = 1.2em = 12px，這個就是由於em做爲字體單位會繼承父元素的字體大小，在本例中，因爲給父元素<li>設置了字體大小爲1.2em，因此瀏覽器在計算<a>標籤和<span>標籤的字體大小時就是上面實際所獲得的結果。spa

這樣一來其實em真正的計算公式就是：1 ➗ 當前父元素的font-size x 須要轉換的像素值 = em值，就不是單純地每次都去除以16px了，顯然這種繼承的方式在開發時會帶來極大的不便。code

rem

爲了解決上面提到的em字體大小繼承問題，又誕生出了一個新的CSS字體大小單位：rem，即「root em」，它在字體大小與px進行換算時與em有着一樣的換算規則，但惟一不一樣的是，rem只會以根元素的字體大小做爲換算基準，而不會每次都從本身當前的父元素那裏繼承，在Web頁面中根元素就是<html>，它的字體大小就是瀏覽器當前所設置的字體大小，默認狀況下就是16px。htm

這樣一來，按照上面提到的轉換規則，仍是上面的例子，把<body style="font-size:62.5%">賦值給<html>，即<html style="font-size:62.5%">，全部的單位改爲rem，就能夠獲得咱們的指望結果：<a>標籤下面的字體大小應該爲1.2rem也就是12px，<span>標籤下面的字體大小爲1rem也就是10px（此處只講述原理，假設忽略瀏覽器的最小字體大小限制）。對象

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

瀏覽器兼容性

rem是CSS 3當中引入的單位，支持的瀏覽器有：Mozilla Firefox 3.6+、Apple Safari 5.0+、Google Chrome、IE9+和Opera11+，在現代瀏覽器或移動端，咱們能夠放心地使用rem來做爲字體大小單位，可是若是你想使用rem這個單位，又想兼容低版本的IE瀏覽器，能夠考慮px和rem同時使用，用px兼容低版本IE的效果，用rem實現現代瀏覽器的效果。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。