簡(jiǎn)言
應(yīng)用象EM 和 REM這種相對(duì)長(zhǎng)度單位進(jìn)行頁(yè)面排版是WEB開(kāi)發(fā)中的最佳實(shí)踐。在頁(yè)面排版中較好應(yīng)用EM 和 REM，根據(jù)設(shè)備尺寸縮放顯示元素的大小。這就使得組件在不同設(shè)備上都達(dá)到最佳的顯示效果成為可能。
但問(wèn)題是究竟該用 EM 還是 REM 呢？關(guān)于這個(gè)問(wèn)題一直存在比較大的爭(zhēng)議。本文將會(huì)給大家介紹究竟什么是 EM 和 REM 和如何進(jìn)行兩者的選擇，以及結(jié)合兩者優(yōu)勢(shì)構(gòu)建模塊化的WEB組件。
注：本文內(nèi)容簡(jiǎn)單，只面向初級(jí)開(kāi)發(fā)人員，約2500字，閱讀時(shí)間5分鐘。
1 什么是EM？
em 是相對(duì)長(zhǎng)度單位。它相對(duì)于當(dāng)前元素字體尺寸，即font-size。舉例來(lái)說(shuō)，如果當(dāng)前元素的字體是20px，那么當(dāng)前元素中的1em就等于20px。
h1 { font-size: 20px } /* 1em = 20px */
p { font-size: 16px } /* 1em = 16px */
實(shí)際開(kāi)發(fā)中，用相對(duì)長(zhǎng)度單位（如 em）表示字體大小是WEB開(kāi)發(fā)中的最佳實(shí)踐。
考慮下面的代碼：
h1 { font-size: 2em }
這里的h1元素字體大小究竟是多少呢？
這時(shí)，我們需要根據(jù)<h1>父元素字體的大小，來(lái)計(jì)算<h1>字體的尺寸大小。如果父元素是<html>，而且<html>的字體大小是16px。就可以計(jì)算出<h1>的字體大小是32px，即2*16px。
用代碼表示如下：
html { font-size: 16px }
h1 { font-size: 2em } /* 16px * 2 = 32px */
設(shè)置<html>字體的大小一般來(lái)說(shuō)都不是一個(gè)好主意，因?yàn)檫@樣重寫了用戶瀏覽器的默認(rèn)設(shè)置。相反，可以使用百分比值或者根本不聲明<html>字體大小。
html { font-size: 100% } /* 缺省 16px */
對(duì)于大多數(shù)用戶或?yàn)g覽器，字體缺省大小是16px（未做瀏覽器缺省字體尺寸設(shè)置）。
em 還能用來(lái)指定除字體大小外的其它屬性，象margin或padding等屬性都可以用em來(lái)表示。
考慮下面的代碼， 對(duì)于<h1>和<p>元素，margin-bottom值應(yīng)該是多少？ （假設(shè)<html>的字號(hào)被設(shè)置為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，但是外邊距結(jié)果值卻不相同。上述現(xiàn)象的出現(xiàn)，是因?yàn)?code>em是相對(duì)于當(dāng)前元素字體的大小。由于<h1>中的字體大小現(xiàn)在設(shè)置為2em， 因此<h1>中其它屬性的1em值就是 1em = 32px。這里比較容易引起誤解的地方。
2 什么是REM？
rem表示 root em，它是相對(duì)于根元素的長(zhǎng)度單位。這里根元素就是<html>中定義的字體大小。這意味著任何地方的1rem總是等于<html>中定義的字體大小。
利用上述相同的代碼，我們用 rem 來(lái)代替 em，查看margin-bottom的計(jì)算值究竟是多少？
h1 {
font-size: 2rem;
margin-bottom: 1rem; /* 1rem = 16px */
}
p {
font-size: 1rem;
margin-bottom: 1rem; /* 1rem = 16px */
}
如上述代碼所示，1rem總是等于16px（除非變更了<html>字體的大小）。rem的大小相較于em來(lái)說(shuō)意義更直接明確，也很容易理解。
3 REM 還是 EM?
在項(xiàng)目開(kāi)發(fā)中究竟是選用 rem 還是 em 一直以來(lái)爭(zhēng)議不斷。一些開(kāi)發(fā)人員不使用rem，因?yàn)?code>rem使組件不那么模塊化。而另一些開(kāi)發(fā)人員喜歡rem的簡(jiǎn)單性，使用rem處理所有元素。
其實(shí) em和rem都有各自的優(yōu)勢(shì)和劣勢(shì)，在實(shí)際項(xiàng)目開(kāi)發(fā)中，應(yīng)該結(jié)合使用兩者，利用各自的優(yōu)勢(shì)，從而實(shí)現(xiàn)較好代碼質(zhì)量和顯示效果。
那么在具體的應(yīng)用中如何在兩者中做選擇呢？有兩條簡(jiǎn)單的指導(dǎo)原則：
- 如果屬性尺寸要根據(jù)元素字體進(jìn)行縮放，則使用
em - 其它情況下都使用
rem
上述規(guī)則太簡(jiǎn)單了。 為了更好的理解上述規(guī)則，我們就以一個(gè)簡(jiǎn)單的header組件為例，說(shuō)明單獨(dú)使用兩者來(lái)實(shí)現(xiàn)組件遇到的問(wèn)題，并體會(huì)結(jié)合使用兩者所帶來(lái)的優(yōu)勢(shì)。
3.1 只使用REM
這里我們只使用rem來(lái)編寫一個(gè)header組件，代碼及運(yùn)行結(jié)果如下：
.header {
font-size: 1rem;
padding: 0.5rem 0.75rem;
background: #7F7CFF;
}
接下來(lái)，網(wǎng)站需要一個(gè)尺寸更大的header組件。
變更CSS代碼如下：
.header {
font-size: 1rem;
padding: 0.5rem 0.75rem;
background: #7F7CFF;
}
.header-large {
font-size: 2rem;
}
運(yùn)行結(jié)果如下：
從上述運(yùn)行結(jié)果可以看出，文字的內(nèi)邊距（padding）過(guò)小，顯示效果不協(xié)調(diào)。如果我們堅(jiān)持只使用rem，只能變更c(diǎn)ss代碼如下：
.header {
font-size: 1rem;
padding: 0.5rem 0.75rem;
background: #7F7CFF;
}
.header-large {
font-size: 2rem;
padding: 1rem 1.5rem;
}
變更后運(yùn)行結(jié)果如下：
上述代碼及運(yùn)行結(jié)果，雖然達(dá)到了預(yù)期的顯示效果，但卻違背了代碼復(fù)用的原則。如果網(wǎng)站有多種尺寸的.header樣式，就要多次重復(fù)的定義內(nèi)邊距。重復(fù)的代碼增加了項(xiàng)目復(fù)雜度，降低了可維護(hù)性。
這時(shí)可以利用em可以變更上述代碼如下：
.header {
font-size: 1rem;
padding: 0.5em 0.75em;
background: #7F7CFF;
}
.header-large {
font-size: 2rem;
}
運(yùn)行結(jié)果請(qǐng)查看演示程序：
如上述演示程序所示，當(dāng)元素屬性值的大小需要根據(jù)元素字體尺寸縮放時(shí)，就應(yīng)該應(yīng)用 em 來(lái)定義屬性尺寸。這就是前述規(guī)則中的第一條規(guī)則。
3.2 只使用EM
如果只使用em來(lái)定義上述組件，結(jié)果會(huì)怎樣呢？
我們變更上述代碼如下（em替換rem）：
.header {
font-size: 1em;
padding: 0.5em 0.75em;
background: #7F7CFF;
}
.header-large {
font-size: 2em;
}
為更接近實(shí)際，我們引入了<p>元素，并變更html代碼如下：
<div class="header header-large">名人名言</div>
<p>簡(jiǎn)單是穩(wěn)定的前提</p>
<div class="header">名人名言</div>
<p>簡(jiǎn)單是穩(wěn)定的前提</p>
增加p元素css代碼如下：
p {
padding: 0.5em 0.75em;
}
運(yùn)行結(jié)果如下：
從上述運(yùn)行經(jīng)果中，不難看出.header-large部分的標(biāo)題并沒(méi)有和文本左對(duì)齊。而如果只使用em實(shí)現(xiàn)左對(duì)齊，則需要變更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;
}
變更后運(yùn)行結(jié)果如下：
上述代碼及運(yùn)行結(jié)果，雖然達(dá)到了預(yù)期的顯示效果，但卻違背了代碼復(fù)用的原則。如果網(wǎng)站有多種尺寸的.header樣式，就要多次重復(fù)的定義左右邊距。重復(fù)的代碼增加了項(xiàng)目復(fù)雜度，降低了可維護(hù)性。
解決上述問(wèn)題的辦法是結(jié)合使用em和rem，即使用em定義上下邊距，使用rem定義左右邊距。變更后代碼如下：
.header {
padding: 0.5em 0.75rem;
font-size: 1em;
background: #7F7CFF;
}
.header-large {
font-size: 2em;
}
運(yùn)行結(jié)果請(qǐng)查看演示程序：
3.3 EM還是REM總結(jié)
究竟是該使用em還是rem呢？答案應(yīng)該是結(jié)合使用rem和rem。當(dāng)屬性值的大小需要根據(jù)當(dāng)前元素字體尺寸縮放時(shí)，就選用em，其它的情況都使用更簡(jiǎn)單的rem。
4 em及rem值的設(shè)定
em和rem 屬性值都要經(jīng)過(guò)計(jì)算轉(zhuǎn)化成絕過(guò)長(zhǎng)度單位。常用的字體尺寸用相對(duì)長(zhǎng)度單位表示會(huì)很困難?？聪旅娉Ｓ米煮w值的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
如上述列表所示，上述尺寸值的表示及計(jì)算都不分的不便。為了解決上述問(wèn)題要用到一個(gè)小技巧，即著名的 "62.5%"技術(shù)。具體請(qǐng)查看下述代碼：
body { font-size:62.5%; } /* =10px */
h1 { font-size: 2.4em; } /* =24px */
p { font-size: 1.4em; } /* =14px */
通過(guò)62.5%的設(shè)定，就可以很容易用em來(lái)定義具體屬性的尺寸了（10倍的關(guān)系）。
而rem，則需要采用如下的方式：
html { font-size: 62.5%; } /* =10px */
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */
5 響應(yīng)式例子
一個(gè)簡(jiǎn)單的響應(yīng)式的例子，調(diào)整瀏覽器寬度查看演示效果。
6 參考資料
- W3C:CSS Values and Units Module Level 3
- zellwk:REM vs EM – The Great Debate
- sitepoint:Understanding and Using rem Units in CSS
- tutsplus:Comprehensive Guide: When to Use Em vs. Rem
- css-tricks:Confused About REM and EM?
7 說(shuō)明
文中所述文字及代碼部分匯編于網(wǎng)絡(luò)。因時(shí)間不足，能力有限等原因，存在文字闡述不準(zhǔn)及代碼測(cè)試不足等諸多問(wèn)題。因此只限于學(xué)習(xí)范圍，不適用于實(shí)際應(yīng)用。另em和rem在較老的瀏覽器中存在兼容性問(wèn)題。
