rem與em的使用和區(qū)別詳解

編者：在自適應(yīng)制作稿中，我們經(jīng)常會(huì)看到rem和em這兩個(gè)單位的冒泡，rem是基于html元素的字體大小來(lái)決定，而em則根據(jù)使用它的元素的大小決定（很多人錯(cuò)誤以為是根據(jù)父類元素，實(shí)際上是使用它的元素繼承了父類的屬性才會(huì)產(chǎn)生的錯(cuò)覺(jué)）

你可能已經(jīng)很熟練使用這兩個(gè)靈活的單位，但你可能不完全了解何時(shí)使用 rem ，何時(shí)使用 em。 本教程將幫你弄清楚!

Em 和 rem都是靈活、 可擴(kuò)展的單位，由瀏覽器轉(zhuǎn)換為像素值，具體取決于您的設(shè)計(jì)中的字體大小設(shè)置。 如果你使用值 1em 或 1rem，它可以被瀏覽器翻譯成 從16px到 160px 或其他任意值。

CSS 邊距設(shè)置為 1em

瀏覽器翻譯成16px

CSS padding設(shè)為 16px

瀏覽器翻譯成160px
另一方面，瀏覽器使用 px 值，所以 1px 將始終顯示為完全 1px。

滑動(dòng)滑塊試試這個(gè) CodePen 例子，你可以看到rem 和 em 單位的值可以轉(zhuǎn)化為不同的像素值，而 px 單位保持固定大小:

最大的問(wèn)題是

使用 em 和 rem 單位可以讓我們的設(shè)計(jì)更加靈活，能夠控制元素整體放大縮小，而不是固定大小。 我們可以使用這種靈活性，使我們?cè)陂_(kāi)發(fā)期間，能更加快速靈活的調(diào)整，允許瀏覽器用戶調(diào)整瀏覽器大小來(lái)達(dá)到最佳體驗(yàn)。

Em 和 rem 單位提供的這種靈活性和工作方式都很相似，所以最大的問(wèn)題是，我們何時(shí)應(yīng)使用 em 值，何時(shí)應(yīng)使用 rem 值呢?

主要區(qū)別

Em 和 rem 單位之間的區(qū)別是瀏覽器根據(jù)誰(shuí)來(lái)轉(zhuǎn)化成px值 理解這種差異是決定何時(shí)使用哪個(gè)單元的關(guān)鍵。

我們要通過(guò)復(fù)習(xí) rem 和 em 單位如何工作，來(lái)確保你知道每一個(gè)細(xì)節(jié)。 然后我會(huì)講到為什么你應(yīng)該使用 em 或 rem 的單位。

最后，我們會(huì)看看到底哪些典型元素的設(shè)計(jì)，你應(yīng)該在實(shí)際應(yīng)用中使用哪種類型的單位。

rem 單位如何轉(zhuǎn)換為像素值

當(dāng)使用 rem 單位，他們轉(zhuǎn)化為像素大小取決于頁(yè)根元素的字體大小，即 html 元素的字體大小。 根元素字體大小乘以你 rem 值。

例如，根元素的字體大小 16px，10rem 將等同于 160px，即 10 x 16 = 160。

CSS padding設(shè)置為 10rem

計(jì)算結(jié)果為160px

em 單位如何轉(zhuǎn)換為像素值

當(dāng)使用em單位時(shí)，像素值將是em值乘以使用em單位的元素的字體大小。

例如，如果一個(gè) div 有 18px 字體大小，10em 將等同于 180px，即 10 × 18 = 180。

CSS padding設(shè)置為 10em

計(jì)算到 180px (或接近它)

重點(diǎn)理解:

有一個(gè)比較普遍的誤解，認(rèn)為 em 單位是相對(duì)于父元素的字體大小。 事實(shí)上，根據(jù)W3標(biāo)準(zhǔn) ，它們是相對(duì)于使用em單位的元素的字體大小。

父元素的字體大小可以影響 em 值，但這種情況的發(fā)生，純粹是因?yàn)槔^承。 讓我們看看為什么以及如何起作用。

Em 單位的遺傳效果

使用 em 單位存在繼承的時(shí)候，情況會(huì)變得比較棘手，因?yàn)槊總€(gè)元素將自動(dòng)繼承其父元素的字體大小。 繼承效果只能被明確的字體單位覆蓋，比如px,vw

使用 em 單位的元素字體大小根據(jù)它們來(lái)定。 但該元素可能繼承其父元素的字體大小，而父元素又繼承其父元素的字體大小，等等。 因此，以 em 為單位的元素字體大小可能會(huì)受到其任何父元素的字體大小影響。

讓我們看看一個(gè)例子。 在下面的 CodePen單步執(zhí)行試試。 隨著你的前進(jìn)，使用 Chrome 開(kāi)發(fā)工具或 Firebug 為火狐瀏覽器來(lái)檢查我們的 em 單位計(jì)算到的像素值。

Em 繼承的例子

如果我們的根元素字體大小為 16px (通常是默認(rèn)值) 一個(gè)子元素 div 里面padding值為 1.5em，該 div 將從根元素繼承字體大小 16px。 因此padding會(huì)翻譯成 24px，即 1.5 x 16 = 24。

如果我們加多一個(gè)div來(lái)包裹原先的div，然后設(shè)置其字體大小為 1.25em呢?

我們包裹的 div 繼承根元素字體大小 16px ，并乘以它自己的 1.25em 的字體大小。 這將設(shè)置包裹 div 字體大小為 20px，即 1.25 x 16 = 20。

現(xiàn)在我們?cè)嫉?div 不再直接從根元素繼承,而是從其新的父元素繼承字體大小為 20px 1.5em 其padding值現(xiàn)在等于 30px，即 1.5 x 20 = 30。

這個(gè)繼承效應(yīng)可以更復(fù)雜，如果我們向我們?cè)嫉?div 添加 em 字體單位，比方說(shuō) 1.2em。

Div 從其父級(jí)繼承 20px 字體大小，然后，乘以它自己的 1.2em 設(shè)置，給它 24px，即 1.2 × 20 = 24 新字體大小。

div上的1.5em padding 現(xiàn)在將再次改變大小，用新的字體大小，36px，即 1.5 × 24 = 36 。

最后，為了進(jìn)一步說(shuō)明那個(gè) em 單位是相對(duì)于他們最終獲得(不是父元素)的字體大小，讓我們來(lái)看看設(shè)置padding 1.5em 如果我們顯式設(shè)置 div 使用 14px值，不繼承字體大小會(huì)發(fā)生什么。

現(xiàn)在，我們的padding為 21px，即 1.5 x 14 = 21 已經(jīng)變小了。 它不受父元素的字體大小。

由于存在著這些隱患，你可以看到為什么必須知道如何正確管理使用 em 單位。

瀏覽器設(shè)置 HTML 元素字體大小的影響

默認(rèn)情況下瀏覽器通常有字體大小 16px，但這可以被用戶更改為從 9px 到 72px的任何值

你需要知道的:

根 html 元素將繼承瀏覽器中設(shè)置的字體大小，除非顯式設(shè)置固定值去覆蓋。

所以 html 元素的字體大小雖然是直接確定 rem 值，但字體大小可能首先來(lái)自瀏覽器設(shè)置。

因此瀏覽器的字體大小設(shè)置可以影響每個(gè)使用 rem 單元以及每個(gè)通過(guò) em 單位繼承的值。

沒(méi)有設(shè)置 HTML 字體大小時(shí)，瀏覽器設(shè)置起作用

除非重寫(xiě)，否則它將繼承瀏覽器默認(rèn)設(shè)置的字體大小。 例如，讓我們把網(wǎng)站的html元素沒(méi)有設(shè)置font-size值。

如果用戶讓他們的瀏覽器默認(rèn)字體大小為 16px，那么根元素字體大小將為 16px。 在 Chrome 開(kāi)發(fā)工具下，你可以在已計(jì)算選項(xiàng)卡下看到一個(gè)元素繼承的屬性。

在這種情況下 10rem 等于 160px，即 10 x 16 = 160。

如果用戶將其瀏覽器中的默認(rèn)字體大小調(diào)為18px，根字體大小變成 18px。 現(xiàn)在 10rem 轉(zhuǎn)換為 180px，即 10 × 18 = 180。

瀏覽器將調(diào)整使用 em 單位的 HTML 元素字體大小

當(dāng) em 單位設(shè)置在 html 元素上時(shí)，它將轉(zhuǎn)換為em值乘以瀏覽器字體大小的設(shè)置。

例如，如果網(wǎng)站的 html 元素的字體大小屬性設(shè)置為 1.25em，根元素字體大小將為 1.25 倍的瀏覽器的字體大小設(shè)置。

如果瀏覽器字體大小被設(shè)置為 16px，根字體大小會(huì)出來(lái)為 20px，即 1.25 x 16 = 20。

在這種情況下 10rem 將等于 200px，即 10 × 20 = 200。

所以，如果瀏覽器字體大小被設(shè)置為 20px，根元素字體大小會(huì)翻譯成 25px，即 1.25 × 20 = 25。

現(xiàn)在 10rem 將等于 250px，即 10 × 25 = 250。

總結(jié)與 rem 差異 em

上述所有歸結(jié)如下:

• rem 單位翻譯為像素值是由 html 元素的字體大小決定的。 此字體大小會(huì)被瀏覽器中字體大小的設(shè)置影響，除非顯式重寫(xiě)一個(gè)具體單位。
• em 單位轉(zhuǎn)為像素值，取決于他們使用的字體大小。 此字體大小受從父元素繼承過(guò)來(lái)的字體大小，除非顯式重寫(xiě)與一個(gè)具體單位。

為什么使用 rem 單位:

Rem 單位提供最偉大的力量并不僅僅是他們提供一致尺寸而不是繼承。 相反，它給我們的一個(gè)途經(jīng)去獲取用戶的偏好來(lái)影響網(wǎng)站中每一處使用rem的元素大小，不再是使用固定的 px 單位。

為此，使用 rem 單位的主要目的應(yīng)該是確保無(wú)論用戶如何設(shè)置自己的瀏覽器，我們的布局都能調(diào)整到合適大小。

一個(gè)站點(diǎn)最初設(shè)計(jì)可以專注于最常見(jiàn)的默認(rèn)瀏覽器中字體大小 16px。

瀏覽器字體大小 16px

但是，通過(guò)使用 rem 單位，如果用戶調(diào)整其字體大小，我們也能保證布局的完整性，使用較小的文本避免文本空間被壓扁了。

瀏覽器字體大小 34px

如果用戶縮小其字體大小，整個(gè)布局掉下來(lái)，空白區(qū)域中的文本也不會(huì)想得很無(wú)力。

瀏覽器字體大小 9px

用戶會(huì)因?yàn)楦鞣N各樣的原因更改字體大小設(shè)置。 容納這些設(shè)置可以獲得更好的用戶體驗(yàn)。

重要的是:

一些設(shè)計(jì)師使用結(jié)合 rem 單位的方式給html元素設(shè)置了一個(gè)固定的px單位。 這是很普遍的做法，所以改變html元素的字體大小時(shí)，可以使整個(gè)頁(yè)面做相應(yīng)調(diào)整

我強(qiáng)烈反對(duì)種做法，因?yàn)樗貙?xiě)繼承了用戶設(shè)置的瀏覽器字體大小。 更夸張的說(shuō)，這剝削了用戶自行調(diào)整以獲得最佳視覺(jué)效果的能力。

如果您確實(shí)需要更改 html 元素的字體大小，那么就使用em，rem單位，這樣根元素的值還會(huì)是用戶瀏覽器字體大小的乘積。

這將允許您通過(guò)更改您的 html 元素的字體大小，調(diào)整你的設(shè)計(jì)，但仍會(huì)保留用戶的瀏覽器設(shè)置的效果。

為什么使用 em 單位

em 單位取決于一個(gè)font-size值而非 html 元素的字體大小。

為此，em 單位的主要目的應(yīng)該是允許保持在一個(gè)特定的設(shè)計(jì)元素范圍內(nèi)的可擴(kuò)展性。

例如，您可能使用em 值設(shè)置導(dǎo)航菜單項(xiàng)的padding、 margin，line-height等值。

帶有0.9rem 字體大小的菜單

通過(guò)這種方式，如果您更改菜單的字體大小菜單項(xiàng)周圍的間距將在剩余的空間按比例縮放。

帶有1.2rem 字體大小的菜單

前面一節(jié)中你看到跟蹤 em 單位如何變得不可收拾。 為此，我建議只在你標(biāo)識(shí)清楚的情況下使用 em 單位。

實(shí)際應(yīng)用

一些 web 設(shè)計(jì)師之間存在辯論，我相信不同的人有不同的首選的方法，但我的建議是，如下所示。

使用 em 單位:

根據(jù)某個(gè)元素的字體大小做縮放而不是根元素的字體大小。

一般來(lái)說(shuō)，你需要使用 em 單位的唯一原因是縮放沒(méi)有默認(rèn)字體大小的元素。

根據(jù)我們上面的例子，設(shè)計(jì)組件比如按鈕，菜單和標(biāo)題可能會(huì)有自己明確的字體大小。 當(dāng)你修改字體大小的時(shí)候，你希望整個(gè)組件都適當(dāng)縮放

通用屬性這一準(zhǔn)則將適用于在非默認(rèn)字體大小的元素上的padding、 margin、 width、 height和line-height等值。

我建議，當(dāng)您使用 em 單位，他們使用的元素的字體大小應(yīng)設(shè)置對(duì)rem單位，以保留的可擴(kuò)展性，但避免繼承混淆。

通常不使用 em 單位控制字體大小

我們經(jīng)常會(huì)看到使用em作為字體大小單位，特別是標(biāo)題，當(dāng)我認(rèn)為如果使用rem將更具可擴(kuò)展性。

標(biāo)題經(jīng)常使用 em 單位的原因是他們相比px單位，在相對(duì)常規(guī)文本大小方面更出色。 然而 rem 單位同樣也可以實(shí)現(xiàn)這一目標(biāo)。 如果 html 元素上任何字體大小調(diào)整，標(biāo)題大小仍會(huì)縮放。

請(qǐng)嘗試更改下面的 CodePen，看看 html 元素上的 em 字體大小如何起作用:

少部分情況下，我們不想我們的字體大小根據(jù)根元素做調(diào)整，只有幾個(gè)例外的情況。

我們可以想到的例子是一個(gè)使用 em 字體大小的下拉菜單，我們有第二個(gè)級(jí)別的菜單項(xiàng)文本大小取決于第一級(jí)字體大小。 另一個(gè)例子可能是用在按鈕里面的字體圖標(biāo)，字體圖標(biāo)的大小跟按鈕的文本大小有關(guān)。

然而，大多數(shù) web 設(shè)計(jì)中的元素往往不會(huì)有這種類型的要求，所以一般使用 rem 單位的字體大小，em 單位只在特殊的情況下使用。

使用 rem 單位:

不需要 em 單位，并且根據(jù)瀏覽器的字體大小設(shè)置縮放的任何尺寸。

這幾乎在一個(gè)標(biāo)準(zhǔn)的設(shè)計(jì)中占據(jù)了一切，包括heights，widths，padding，margin，border，font-size，shadows，幾乎包括你布局的每部分。

簡(jiǎn)單地說(shuō)，一切可擴(kuò)展都應(yīng)該使用 rem 單位。

小貼士

創(chuàng)建布局時(shí)，往往要以像素為單位更方便，但部署時(shí)應(yīng)使用rem單位。

你可以使用預(yù)處理比如Stylus / Sass / Less，來(lái)自動(dòng)轉(zhuǎn)換單位或PostCSS之類的插件。

或者，您可以使用 PXtoEM 手動(dòng)做您的轉(zhuǎn)換。

始終使用 rem 單位做媒體查詢

特別注意，當(dāng)使用 rem 單位創(chuàng)建統(tǒng)一可擴(kuò)展的設(shè)計(jì)，媒體查詢也應(yīng)該是rem單位。 這將確保，無(wú)論用戶瀏覽器的字體大小，您的媒體查詢會(huì)對(duì)它作出反應(yīng)和調(diào)整您的布局。

例如，如果用戶縮放文本非常高，您的布局可能需要從兩列到單個(gè)列調(diào)整，因?yàn)樗赡軙?huì)在較小的移動(dòng)設(shè)備上顯示。

如果您的斷點(diǎn)在固定的像素寬度，只有不同的視口的大小可以觸發(fā)它們。 但是基于 rem 的斷點(diǎn)他們將響應(yīng)不同的字體大小。

不要使用 em 或 rem :

多列布局

布局中的列寬通常應(yīng)該是 %，因此他們可以流暢適應(yīng)無(wú)法預(yù)知大小的視區(qū)。

然而單一列一般仍然應(yīng)使用 rem 值來(lái)設(shè)置最大寬度。

例如:

//code from http://caibaojian.com/rem-vs-em.html
.container {
    width: 100%;
    max-width: 75rem;
}

這保持列的靈活，可擴(kuò)展。又能防止變得太寬了。

當(dāng)元素應(yīng)該是嚴(yán)格不可縮放的時(shí)候

在一個(gè)典型的 web 設(shè)計(jì)的過(guò)程中，不會(huì)有很多部分的你不能使用伸縮性設(shè)計(jì)的布局。 不過(guò)偶爾你會(huì)遇到真的需要使用顯式的固定的值，以防止縮放的元素。

采用固定的尺寸值的前提應(yīng)該是，如果被縮放的話，它的結(jié)構(gòu)會(huì)被打碎。 這真的不常出現(xiàn)，所以你想拿出那些 px 單位之前，問(wèn)問(wèn)自己是否使用它們是絕對(duì)必要的。

總結(jié)

讓我們以一個(gè)快速符號(hào)點(diǎn)概括我們介紹的內(nèi)容:

• rem 和 em 單位是由瀏覽器基于你的設(shè)計(jì)中的字體大小計(jì)算得到的像素值。
• em 單位基于使用他們的元素的字體大小。
• rem 單位基于 html 元素的字體大小。
• em 單位可能受任何繼承的父元素字體大小影響
• rem 單位可以從瀏覽器字體設(shè)置中繼承字體大小。
• 使用 em 單位應(yīng)根據(jù)組件的字體大小而不是根元素的字體大小。
• 在不需要使用em單位，并且需要根據(jù)瀏覽器的字體大小設(shè)置縮放的情況下使用rem。
• 使用rem單位，除非你確定你需要 em 單位，包括對(duì)字體大小。
• 媒體查詢中使用 rem 單位
• 不要在多列布局中使用 em 或 rem -改用 %。
• 不要使用 em 或 rem，如果縮放會(huì)不可避免地導(dǎo)致要打破布局元素。

我希望你現(xiàn)在已經(jīng)建立了強(qiáng)健的、 完整的圖片，到底 em 和 rem 的單位如何工作，并通過(guò)，知道如何最好地利用他們?cè)谀愕脑O(shè)計(jì)中。