單闡述下px、em、rem之前的關(guān)系

為什么要選擇rem？

px：像素是相對(duì)于顯示器屏幕分辨率而言的相對(duì)長(zhǎng)度單位。pc端使用px倒也無(wú)所謂，可是在移動(dòng)端，因?yàn)槭謾C(jī)分辨率種類頗多，不可能一個(gè)個(gè)去適配，這時(shí)px就顯得非常無(wú)力，所以就要考慮em和rem。

em：繼承父級(jí)的，假設(shè)html的font-size默認(rèn)為16px，body字體大小定義為50%，那么在body里字體大小就是1em=8px了。可當(dāng)你又定義了一個(gè)div，然后把字體設(shè)置成了50%，請(qǐng)問(wèn)，現(xiàn)在div下的1em等于多少？因?yàn)槔^承了父級(jí)的值，現(xiàn)在這個(gè)div里的1em=4px，這么嵌套下去的話，抱歉，我數(shù)學(xué)不好！所有rem就出現(xiàn)了。

rem：是em的升級(jí)版，rem只會(huì)相對(duì)html的值，不會(huì)受到父級(jí)的影響，這樣的好處在于：從em里的例子來(lái)講，1rem始終會(huì)等于8px。使用的時(shí)候不需要重新計(jì)算rem此時(shí)的大小。rem因?yàn)槭莄ss3增加的，所以ie8或以下請(qǐng)無(wú)視（始終想不明白，為什么國(guó)人至今對(duì)微軟都放棄的ie這么戀戀不舍）。

以上也算是講清了他們之間的區(qū)別和關(guān)系，rem更多的運(yùn)用于移動(dòng)H5頁(yè)面的適配使用。

下面來(lái)說(shuō)說(shuō)怎么更方便的使用rem和自己開(kāi)文處提到的坑！

之前遇到的坑是這樣的。瀏覽器默認(rèn)的字體大小都是16px（注意這里），所以要使1rem=10px，那么只要在html選擇器中聲明Font-size=62.5%（10÷16*100%=62.5%）就可以直接使用1rem=10px單位進(jìn)行換算，其實(shí)這個(gè)算法是沒(méi)有錯(cuò)的。可是，哪里來(lái)的自信讓每個(gè)瀏覽器默認(rèn)字體都是16px？？？？反正我也不知道自信哪來(lái)。。現(xiàn)在Chrome默認(rèn)大小可以是12px也可以是16px，那么問(wèn)題來(lái)了，國(guó)內(nèi)瀏覽器，有幾個(gè)不是用的谷歌內(nèi)核。所以html選擇器中聲明Font-size=62.5%，1rem就等于10px的換算就有點(diǎn)坑爹了，對(duì)于我這種一個(gè)像素都糾結(jié)的人來(lái)說(shuō)，很蛋疼。這坑是我當(dāng)時(shí)買書(shū)學(xué)h5的時(shí)候預(yù)留下的后遺癥，現(xiàn)在這個(gè)毛病還有，因?yàn)榭旌头奖?T_T!真是矛盾。。。

因?yàn)閞em是相對(duì)html的，那么只要將html選擇器設(shè)置一個(gè)絕對(duì)大小的值：比如在html選擇器設(shè)置font-size：20px；那么1rem=20px（解釋下為什么是20而不是其他的，首先10的倍數(shù)容易計(jì)算，那為什么不是10本身而是20？現(xiàn)在Chrome最小的字體是12px，所以10px是無(wú)效的，進(jìn)一步就取20px）；現(xiàn)在是不是和效果圖一個(gè)像素都不差？！！！

且要兼容手機(jī)各個(gè)分別率，使用媒體查詢media 可以設(shè)置不同的大小，這樣在常規(guī)的設(shè)備中都可以精準(zhǔn)到每一個(gè)像素。

這么換算來(lái)?yè)Q算去好麻煩有木有！！所有發(fā)現(xiàn)了下面的換算工具，媽媽再也不用說(shuō)我數(shù)學(xué)題不會(huì)做了！

下面是我直接在工具復(fù)制過(guò)來(lái)的現(xiàn)成rem換算適配代碼↓（設(shè)計(jì)稿寬度：640，字體值：20）

@media only screen and (max-width: 1080px), only screen and (max-device-width:1080px) {

html,body {

font-size:16.875px;

}

}

@media only screen and (max-width: 960px), only screen and (max-device-width:960px) {

html,body {

font-size:15px;

}

}

@media only screen and (max-width: 800px), only screen and (max-device-width:800px) {

html,body {

font-size:12.5px;

}

}

@media only screen and (max-width: 720px), only screen and (max-device-width:720px) {

html,body {

font-size:11.25px;

}

}

@media only screen and (max-width: 640px), only screen and (max-device-width:640px) {

html,body {

font-size:10px;

}

}

@media only screen and (max-width: 600px), only screen and (max-device-width:600px) {

html,body {

font-size:9.375px;

}

}

@media only screen and (max-width: 540px), only screen and (max-device-width:540px) {

html,body {

font-size:8.4375px;

}

}

@media only screen and (max-width: 480px), only screen and (max-device-width:480px) {

html,body {

font-size:7.5px;

}

}

@media only screen and (max-width: 414px), only screen and (max-device-width:414px) {

html,body {

font-size:6.46875px;

}

}

@media only screen and (max-width: 400px), only screen and (max-device-width:400px) {

html,body {

font-size:6.25px;

}

}

@media only screen and (max-width: 375px), only screen and (max-device-width:375px) {

html,body {

font-size:5.859375px;

}

}

@media only screen and (max-width: 360px), only screen and (max-device-width:360px) {

html,body {

font-size:5.625px;

}

}

@media only screen and (max-width: 320px), only screen and (max-device-width:320px) {

html,body {

font-size:5px;

}

}

@media only screen and (max-width: 240px), only screen and (max-device-width:240px) {

html,body {

font-size:3.75px;

擊右上方紅色按鈕關(guān)注“web秀”，讓你真正秀起來(lái)！

簡(jiǎn)言

em 和 rem這種相對(duì)長(zhǎng)度單位進(jìn)行頁(yè)面排版是web開(kāi)發(fā)中的最好的選擇。在頁(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組件。

什么是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ā)中的最好的選擇。請(qǐng)看下面的代碼：

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)閑m是相對(duì)于當(dāng)前元素字體的大小。由于<h1>中的字體大小現(xiàn)在設(shè)置為2em， 因此<h1>中其它屬性的1em值就是 1em= 32px。這里比較容易引起誤解的地方。

什么是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ō)意義更直接明確，也很容易理解。

抉擇rem/em

在項(xiàng)目開(kāi)發(fā)中究竟是選用 rem 還是 em 一直以來(lái)爭(zhēng)議不斷。一些開(kāi)發(fā)人員不使用rem，因?yàn)閞em使組件不那么模塊化。而另一些開(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ì)。

只使用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é)果可以看出，文字的內(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é)果，雖然達(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;
}

當(dāng)元素屬性值的大小需要根據(jù)元素字體尺寸縮放時(shí)，就應(yīng)該應(yīng)用 em 來(lái)定義屬性尺寸。這就是前述規(guī)則中的第一條規(guī)則。

只使用em

如果只使用em來(lái)定義上述組件，結(jié)果會(huì)怎樣呢？

我們變更上述代碼如下（em替換rem）：

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

為更接近實(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>

從上述運(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é)果，雖然達(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;
}

總結(jié)

究竟是該使用em還是rem呢？答案應(yīng)該是結(jié)合使用rem和rem。當(dāng)屬性值的大小需要根據(jù)當(dāng)前元素字體尺寸縮放時(shí)，就選用em，其它的情況都使用更簡(jiǎn)單的rem。

最后提供小技巧：em及rem值的設(shè)定

em及rem值的設(shè)定

em和rem 屬性值都要經(jīng)過(guò)計(jì)算轉(zhuǎn)化成絕過(guò)長(zhǎng)度單位。常用的字體尺寸用相對(duì)長(zhǎng)度單位表示會(huì)很困難。看下面常用字體值的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，則需要采用如下的方式：