什麼時候使用 Em 與 Rem

原文  http://www.w3cplus.com/css/when-to-use-em-vs-rem.html

 

你可能已經很熟練使用這兩個靈活的單位，但你可能不徹底瞭解什麼時候使用rem，什麼時候使用em。 本教程將幫你弄清楚!

em和rem都是相對單位，由瀏覽器轉換爲像素值，具體取決於您的設計中的字體大小設置。 若是你使用值1em或1rem，它能夠被瀏覽器解析成 從16px到160px或其餘任意值。

padding設置了1em

解析出來的值爲16px

padding設置了1em

解析出來的值爲160px

另外一方面，瀏覽器使用px值，因此1px將始終顯示爲徹底1px。

滑動滑塊試試這個 CodePen 例子，你能夠看到rem和em單位的值能夠轉化爲不一樣的像素值，而px單位保持固定大小:

最大問題

使用em和rem單位可讓咱們的設計更加靈活，可以控制元素總體放大縮小，而不是固定大小。 咱們可使用這種靈活性，使咱們在開發期間，能更加快速靈活的調整，容許瀏覽器用戶調整瀏覽器大小來達到最佳體驗。

em和rem單位提供的這種靈活性和工做方式都很類似，因此最大的問題是，咱們什麼時候應使用em值，什麼時候應使用rem值呢?

主要區別

em和rem單位之間的區別是瀏覽器根據誰來轉化成px值 理解這種差別是決定什麼時候使用哪一個單元的關鍵。

咱們要經過複習rem和em單位如何工做，來確保你知道每個細節。 而後我會講到爲何你應該使用em或rem的單位。

最後，咱們會看看到底哪些典型元素的設計，你應該在實際應用中使用哪一種類型的單位。

rem 單位如何轉換爲像素值

當使用rem單位，他們轉化爲像素大小取決於頁根元素的字體大小，即html元素的字體大小。 根元素字體大小乘以你rem值。

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

CSS設置padding爲10rem

瀏覽器解析出來的值爲160px

em 單位如何轉換爲像素值

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

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

CSS設置padding爲10em

瀏覽器解析出來的值爲180px(或接近它)

重點理解:

有一個比較廣泛的誤解，認爲em單位是相對於父元素的字體大小。 事實上，根據 W3標準 ，它們是相對於使用em單位的元素的字體大小。

父元素的字體大小能夠影響em值，但這種狀況的發生，純粹是由於繼承。 讓咱們看看爲何以及如何起做用。

Em 單位的繼承效果

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

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

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

回到頂部

Em 繼承的例子

若是咱們的根元素字體大小爲16px(一般是默認值) 一個子元素div裏面padding值爲1.5em，該div將從根元素繼承字體大小16px。 所以padding會解析成24px，即1.5 x 16 = 24。

若是咱們加多一個div來包裹原先的div，而後設置其字體大小爲1.25em呢?

咱們包裹的div繼承根元素字體大小16px，並乘以它本身的1.25em的字體大小。 這將設置包裹div字體大小爲20px，即1.25 x 16 = 20。

如今咱們原始的div再也不直接從根元素繼承,而是從其新的父元素繼承字體大小爲20px 1.5em其padding值如今等於30px，即1.5 x 20 = 30。

這個繼承效應能夠更復雜，若是咱們向咱們原始的div添加em字體單位，比方說1.2em。

div從其父級繼承20px字體大小，而後，乘以它本身的1.2em設置，給它24px，即1.2 × 20 = 24新字體大小。

div上1.5em的padding如今將再次改變大小，用新的字體大小，36px，即1.5 × 24 = 36。

最後，爲了進一步說明那個em單位是相對於他們最終得到(不是父元素)的字體大小，讓咱們來看看設置padding: 1.5em若是咱們顯式設置div使用14px值，不繼承字體大小會發生什麼。

如今，咱們的padding爲21px，即1.5 x 14 = 21已經變小了。 它不受父元素的字體大小。

因爲存在着這些隱患，你能夠看到爲何必須知道如何正確管理使用em單位。

瀏覽器設置 HTML 元素字體大小的影響

默認狀況下瀏覽器一般有字體大小16px，但這能夠被用戶更改成從9px到72px的任何值。

回到頂部

你須要知道的:

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

因此html元素的字體大小雖然是直接肯定rem值，但字體大小可能首先來自瀏覽器設置。

所以瀏覽器的字體大小設置能夠影響每一個使用rem單元以及每一個經過em單位繼承的值。

沒有設置 HTML 字體大小時，瀏覽器設置起做用

除非重寫，不然它將繼承瀏覽器默認設置的字體大小。 例如，讓咱們把網站的html元素沒有設置font-size值。

若是用戶讓他們的瀏覽器默認字體大小爲16px，那麼根元素字體大小將爲16px。 在 Chrome 開發工具下，你能夠在已計算選項卡下看到一個元素繼承的屬性。

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

若是用戶將其瀏覽器中的默認字體大小調爲18px，根字體大小變成18px。 如今10rem轉換爲180px，即10 × 18 = 180。

瀏覽器將調整使用 em 單位的 HTML 元素字體大小

當em單位設置在html元素上時，它將轉換爲em值乘以瀏覽器字體大小的設置。

例如，若是網站的html元素的字體大小屬性設置爲1.25em，根元素字體大小將爲1.25倍的瀏覽器的字體大小設置。

若是瀏覽器字體大小被設置爲16px，根字體大小會出來爲20px，即1.25 x 16 = 20。

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

因此，若是瀏覽器字體大小被設置爲20px，根元素字體大小會解析成25px，即1.25 × 20 = 25。

如今10rem將等於250px，即10 × 25 = 250。

總結 rem與 em 差別

上述全部歸結以下:

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

爲何使用 rem 單位:

rem單位提供最偉大的力量並不只僅是他們提供一致尺寸而不是繼承。 相反，它給咱們的一個途經去獲取用戶的偏好來影響網站中每一處使用rem的元素大小，再也不是使用固定的px單位。

爲此，使用rem單位的主要目的應該是確保不管用戶如何設置本身的瀏覽器，咱們的佈局都能調整到合適大小。

一個站點最初設計能夠專一於最多見的默認瀏覽器中字體大小16px。

使用瀏覽器默認字號16px

可是，經過使用rem單位，若是用戶調整其字體大小，咱們也能保證佈局的完整性，使用較小的文本避免文本空間被壓扁了。

瀏覽器解析的字號爲34px。

若是用戶縮小其字體大小，整個佈局掉下來，空白區域中的文本也不會想得很無力。

瀏覽器字體大小 9px

用戶會由於各類各樣的緣由更改字體大小設置。 容納這些設置能夠得到更好的用戶體驗。

重要的是:

一些設計師使用結合rem單位的方式給html元素設置了一個固定的px單位。 這是很廣泛的作法，因此改變html元素的字體大小時，可使整個頁面作相應調整

我強烈反對種作法，由於它重寫繼承了用戶設置的瀏覽器字體大小。 更誇張的說，這剝削了用戶自行調整以得到最佳視覺效果的能力。

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

這將容許您經過更改您的html元素的字體大小，調整你的設計，但仍會保留用戶的瀏覽器設置的效果。

爲何使用 em 單位

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

爲此，em單位的主要目的應該是容許保持在一個特定的設計元素範圍內的可擴展性。

例如，您可能使用em值設置導航菜單項的padding、margin，line-height等值。

帶有0.9rem字體大小的菜單

經過這種方式，若是您更改菜單的字體大小菜單項周圍的間距將在剩餘的空間按比例縮放。

帶有1.2rem字體大小的菜單

前面一節中你看到em單位如何變得不可收拾。 爲此，我建議只在你標識清楚的狀況下使用em單位。

實際應用

一些 Web 設計師之間存在辯論，我相信不一樣的人有不一樣的首選的方法，但個人建議是，以下所示。

回到頂部

使用 em 單位:

根據某個元素的字體大小作縮放而不是根元素的字體大小。

通常來講，你須要使用em單位的惟一緣由是縮放沒有默認字體大小的元素。

根據咱們上面的例子，設計組件好比按鈕，菜單和標題可能會有本身明確的字體大小。 當你修改字體大小的時候，你但願整個組件都適當縮放。

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

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

一般不使用em單位控制字體大小

咱們常常會看到使用em做爲字體大小單位，特別是標題，當我認爲若是使用rem將更具可擴展性。

標題常用em單位的緣由是他們相比px單位，在相對常規文本大小方面更出色。 然而rem單位一樣也能夠實現這一目標。 若是html元素上任何字體大小調整，標題大小仍會縮放。

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

少部分狀況下，咱們不想咱們的字體大小根據根元素作調整，只有幾個例外的狀況。

咱們能夠想到的例子是一個使用em字體大小的下拉菜單，咱們有第二個級別的菜單項文本大小取決於第一級字體大小。 另外一個例子多是用在按鈕裏面的字體圖標，字體圖標的大小跟按鈕的文本大小有關。

然而，大多數 Web 設計中的元素每每不會有這種類型的要求，因此通常使用rem單位的字體大小，em單位只在特殊的狀況下使用。

回到頂部

使用 rem 單位:

不須要em單位，而且根據瀏覽器的字體大小設置縮放的任何尺寸。

這幾乎在一個標準的設計中佔據了一切，包括height，width，padding，margin，border，font-size，shadows，幾乎包括你佈局的每部分。

簡單地說，一切可擴展都應該使用rem單位。

小技巧

建立佈局時，每每要以像素爲單位更方便，但部署時應使用rem單位。

你可使用預處理好比 Stylus / Sass / Less ， 來自動轉換單位 或 PostCSS 之類的插件。

或者，您可使用 PXtoEM 手動作您的轉換。

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

特別注意，當使用rem單位建立統一可擴展的設計，媒體查詢也應該是rem單位。 這將確保，不管用戶瀏覽器的字體大小，您的媒體查詢會對它做出反應和調整您的佈局。

例如，若是用戶縮放文本很是高，您的佈局可能須要從兩列到單個列調整，由於它可能會在較小的移動設備上顯示。

若是您的斷點在固定的像素寬度，只有不一樣的視口的大小能夠觸發它們。 可是基於rem的斷點他們將響應不一樣的字體大小。

回到頂部

不要使用 em 或 rem :

多列布局

佈局中的列寬一般應該是%，所以他們能夠流暢適應沒法預知大小的視區。

然而單一列通常仍然應使用rem值來設置最大寬度。

例如:

.container { width: 100%; max-width: 75rem; } 

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

當元素應該是嚴格不可縮放的時候

在一個典型的 Web 設計的過程當中，不會有不少部分的你不能使用伸縮性設計的佈局。 不過偶爾你會遇到真的須要使用顯式的固定的值，以防止縮放的元素。

採用固定的尺寸值的前提應該是，若是被縮放的話，它的結構會被打碎。 這真的不常出現，因此你想拿出那些px單位以前，問問本身是否使用它們是絕對必要的。

總結

讓咱們以一個快速符號點歸納咱們介紹的內容:

• rem和em單位是由瀏覽器基於你的設計中的字體大小計算獲得的像素值。
• em單位基於使用他們的元素的字體大小。
• rem單位基於html元素的字體大小。
• em單位可能受任何繼承的父元素字體大小影響
• rem單位能夠從瀏覽器字體設置中繼承字體大小。
• 使用em單位應根據組件的字體大小而不是根元素的字體大小。
• 在不須要使用em單位，而且須要根據瀏覽器的字體大小設置縮放的狀況下使用rem。
• 使用rem單位，除非你肯定你須要em單位，包括對字體大小。
• 媒體查詢中使用rem單位
• 不要在多列布局中使用em或rem,改用%。
• 不要使用em或rem，若是縮放會不可避免地致使要打破布局元素。

我但願你如今已經創建了強健的、 完整的圖片，到底em和rem的單位如何工做，並經過，知道如何最好地利用他們在你的設計中。

我鼓勵您嘗試爲你本身使用本教程指南，它們會爲您建立徹底成熟的可伸縮性和響應性佈局。

本文根據 @Kezz Bracey 的《 Comprehensive Guide: When to Use Em vs. Rem 》所譯，整個譯文帶有咱們本身的理解與思想，若是譯得很差或有不對之處還請同行朋友指點。如需轉載此譯文，需註明英文出處：http://webdesign.tutsplus.com/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984 。