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

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

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

瀏覽器翻譯成16px

CSS padding設(shè)為 16px

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

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

最大的問題是

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

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

主要區(qū)別

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

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

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

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

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

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

CSS padding設(shè)置為 10rem

計算結(jié)果為160px

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

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

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

CSS padding設(shè)置為 10em

計算到 180px (或接近它)

重點理解:

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

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

Em 單位的遺傳效果

使用 em 單位存在繼承的時候，情況會變得比較棘手，因為每個元素將自動繼承其父元素的字體大小。 繼承效果只能被明確的字體單位覆蓋，比如px,vw

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

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

Em 繼承的例子

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

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

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

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

這個繼承效應(yīng)可以更復(fù)雜，如果我們向我們原始的 div 添加 em 字體單位，比方說 1.2em。

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

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

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

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

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

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

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

你需要知道的:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

總結(jié)與 rem 差異 em

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

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

為什么使用 rem 單位:

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

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

一個站點最初設(shè)計可以專注于最常見的默認瀏覽器中字體大小 16px。

瀏覽器字體大小 16px

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

瀏覽器字體大小 34px

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

瀏覽器字體大小 9px

用戶會因為各種各樣的原因更改字體大小設(shè)置。 容納這些設(shè)置可以獲得更好的用戶體驗。

重要的是:

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

我強烈反對種做法，因為它重寫繼承了用戶設(shè)置的瀏覽器字體大小。 更夸張的說，這剝削了用戶自行調(diào)整以獲得最佳視覺效果的能力。

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

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

為什么使用 em 單位

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

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

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

帶有0.9rem 字體大小的菜單

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

帶有1.2rem 字體大小的菜單

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

實際應(yīng)用

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

使用 em 單位:

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

一般來說，你需要使用 em 單位的唯一原因是縮放沒有默認字體大小的元素。

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

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

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

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

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

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

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

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

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

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

使用 rem 單位:

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

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

簡單地說，一切可擴展都應(yīng)該使用 rem 單位。

小貼士

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

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

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

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

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

例如，如果用戶縮放文本非常高，您的布局可能需要從兩列到單個列調(diào)整，因為它可能會在較小的移動設(shè)備上顯示。

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

不要使用 em 或 rem :

多列布局

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

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

例如:

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

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

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

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

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

總結(jié)

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

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

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