【基礎】EM 仍是 REM？這是一個問題！

時間 2019-11-06

標籤基礎仍是 rem 這是一個問題欄目 CSS 简体版

原文原文鏈接

簡言

應用象EM 和 REM這種相對長度單位進行頁面排版是WEB開發中的最佳實踐。在頁面排版中較好應用EM 和 REM，根據設備尺寸縮放顯示元素的大小。這就使得組件在不一樣設備上都達到最佳的顯示效果成爲可能。css

但問題是究竟該用 EM 仍是 REM 呢？關於這個問題一直存在比較大的爭議。本文將會給你們介紹究竟什麼是 EM 和 REM 和如何進行二者的選擇，以及結合二者優點構建模塊化的WEB組件。html

注：本文內容簡單，只面向初級開發人員，約2500字，閱讀時間5分鐘。web

1 什麼是EM？

em 是相對長度單位。它相對於當前元素字體尺寸，即font-size。舉例來講，若是當前元素的字體是20px，那麼當前元素中的1em就等於20px。瀏覽器

h1 { font-size: 20px } /* 1em = 20px */
p { font-size: 16px } /* 1em = 16px */

實際開發中，用相對長度單位（如 em）表示字體大小是WEB開發中的最佳實踐。網絡

考慮下面的代碼：ide

h1 { font-size: 2em }

這裏的h1元素字體大小到底是多少呢？模塊化

這時，咱們須要根據<h1>父元素字體的大小，來計算<h1>字體的尺寸大小。若是父元素是<html>，並且<html>的字體大小是16px。就能夠計算出<h1>的字體大小是32px，即2*16px。學習

用代碼表示以下：測試

html { font-size: 16px }
h1 { font-size: 2em } /* 16px * 2 = 32px */

設置<html>字體的大小通常來講都不是一個好主意，由於這樣重寫了用戶瀏覽器的默認設置。相反，可使用百分比值或者根本不聲明<html>字體大小。字體

html { font-size: 100% } /* 缺省 16px */

對於大多數用戶或瀏覽器，字體缺省大小是16px（未作瀏覽器缺省字體尺寸設置）。

em 還能用來指定除字體大小外的其它屬性，象margin或padding等屬性均可以用em來表示。

考慮下面的代碼，對於<h1>和<p>元素，margin-bottom值應該是多少？（假設<html>的字號被設置爲100％）。

h1 {
  font-size: 2em; /* 1em = 16px */
  margin-bottom: 1em; /* 1em = 32px */
}
p {
  font-size: 1em; /* 1em = 16px */
  margin-bottom: 1em; /* 1em = 16px */
}

上述<h1>和<p>的margin-bottom都是1em，可是外邊距結果值卻不相同。上述現象的出現，是由於em是相對於當前元素字體的大小。因爲<h1>中的字體大小如今設置爲2em，所以<h1>中其它屬性的1em值就是 1em = 32px。這裏比較容易引發誤解的地方。

2 什麼是REM？

rem表示 root em，它是相對於根元素的長度單位。這裏根元素就是<html>中定義的字體大小。這意味着任何地方的1rem老是等於<html>中定義的字體大小。

利用上述相同的代碼，咱們用 rem 來代替 em，查看margin-bottom的計算值到底是多少？

h1 {
  font-size: 2rem;
  margin-bottom: 1rem; /* 1rem = 16px */
}
p {
  font-size: 1rem;
  margin-bottom: 1rem; /* 1rem = 16px */
}

如上述代碼所示，1rem老是等於16px（除非變動了<html>字體的大小）。rem的大小相較於em來講意義更直接明確，也很容易理解。

3 REM 仍是 EM?

在項目開發中到底是選用 rem 仍是 em 一直以來爭議不斷。一些開發人員不使用rem，由於rem使組件不那麼模塊化。而另外一些開發人員喜歡rem的簡單性，使用rem處理全部元素。

其實 em和rem都有各自的優點和劣勢，在實際項目開發中，應該結合使用二者，利用各自的優點，從而實現較好代碼質量和顯示效果。

那麼在具體的應用中如何在二者中作選擇呢？有兩條簡單的指導原則：

若是屬性尺寸要根據元素字體進行縮放，則使用em
其它狀況下都使用rem

上述規則太簡單了。爲了更好的理解上述規則，咱們就以一個簡單的header組件爲例，說明單獨使用二者來實現組件遇到的問題，並體會結合使用二者所帶來的優點。

3.1 只使用REM

這裏咱們只使用rem來編寫一個header組件，代碼及運行結果以下：

.header {
  font-size: 1rem;
  padding: 0.5rem 0.75rem;
  background: #7F7CFF;
}

接下來，網站須要一個尺寸更大的header組件。

變動CSS代碼以下：

.header {
  font-size: 1rem;
  padding: 0.5rem 0.75rem;
  background: #7F7CFF;
}
.header-large {
  font-size: 2rem;
}

運行結果以下：

從上述運行結果能夠看出，文字的內邊距（padding）太小，顯示效果不協調。若是咱們堅持只使用rem，只能變動css代碼以下：

.header {
  font-size: 1rem;
  padding: 0.5rem 0.75rem;
  background: #7F7CFF;
}
.header-large {
  font-size: 2rem;
  padding: 1rem 1.5rem;
}

變動後運行結果以下：

上述代碼及運行結果，雖然達到了預期的顯示效果，但卻違背了代碼複用的原則。若是網站有多種尺寸的.header樣式，就要屢次重複的定義內邊距。重複的代碼增長了項目複雜度，下降了可維護性。

這時能夠利用em能夠變動上述代碼以下：

.header {
  font-size: 1rem;
  padding: 0.5em 0.75em;
  background: #7F7CFF;
}
.header-large {
  font-size: 2rem;
}

運行結果請查看演示程序：

演示代碼

如上述演示程序所示，當元素屬性值的大小須要根據元素字體尺寸縮放時，就應該應用 em 來定義屬性尺寸。這就是前述規則中的第一條規則。

3.2 只使用EM

若是隻使用em來定義上述組件，結果會怎樣呢？

咱們變動上述代碼以下（em替換rem）：

.header {
  font-size: 1em;
  padding: 0.5em 0.75em;
  background: #7F7CFF;
}
.header-large {
  font-size: 2em;
}

爲更接近實際，咱們引入了<p>元素，並變動html代碼以下：

<div class="header header-large">名人名言</div>
<p>簡單是穩定的前提</p>
<div class="header">名人名言</div>
<p>簡單是穩定的前提</p>

增長p元素css代碼以下：

p {
    padding: 0.5em 0.75em;
}

運行結果以下：

從上述運行經果中，不難看出.header-large部分的標題並無和文本左對齊。而若是隻使用em實現左對齊，則須要變動CSS代碼以下：

.header {
  font-size: 1em;
  padding: 0.5em 0.75em;
  background: #7F7CFF;
}
.header-large {
  font-size: 2em;
  padding-left: 0.375em;
  padding-right: 0.375em;
}

變動後運行結果以下：

上述代碼及運行結果，雖然達到了預期的顯示效果，但卻違背了代碼複用的原則。若是網站有多種尺寸的.header樣式，就要屢次重複的定義左右邊距。重複的代碼增長了項目複雜度，下降了可維護性。

解決上述問題的辦法是結合使用em和rem，即便用em定義上下邊距，使用rem定義左右邊距。變動後代碼以下：

.header {
  padding: 0.5em 0.75rem;
  font-size: 1em;
  background: #7F7CFF;
}

.header-large {
  font-size: 2em;
}

運行結果請查看演示程序：

演示代碼

3.3 EM仍是REM總結

到底是該使用em仍是rem呢？答案應該是結合使用em和rem。當屬性值的大小須要根據當前元素字體尺寸縮放時，就選用em，其它的狀況都使用更簡單的rem。

4 em及rem值的設定

em和rem 屬性值都要通過計算轉化成絕過長度單位。經常使用的字體尺寸用相對長度單位表示會很困難。看下面經常使用字體值的rem表示（基本字體尺寸是16px）：

10px = 0.625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem (base)
18px = 1.125rem
20px = 1.25rem
24px = 1.5rem
30px = 1.875rem
32px = 2rem

如上述列表所示，上述尺寸值的表示及計算都不分的不便。爲了解決上述問題要用到一個小技巧，即著名的 "62.5%"技術。具體請查看下述代碼：

body { font-size:62.5%; }  /* =10px */
h1   { font-size: 2.4em; } /* =24px */
p    { font-size: 1.4em; } /* =14px */

經過62.5%的設定，就能夠很容易用em來定義具體屬性的尺寸了（10倍的關係）。

而rem，則須要採用以下的方式：

html { font-size: 62.5%; }  /* =10px */
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

5 響應式例子

一個簡單的響應式的例子，調整瀏覽器寬度查看演示效果。

演示代碼

6 參考資料

7 說明

文中所述文字及代碼部分彙編於網絡。因時間不足，能力有限等緣由，存在文字闡述不許及代碼測試不足等諸多問題。所以只限於學習範圍，不適用於實際應用。另em和rem在較老的瀏覽器中存在兼容性問題。

相關標籤/搜索

每日一句

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