如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

今天我們深度了解一下 rem 單位，這個單位目前已經(jīng)得到了優(yōu)秀瀏覽器的支持，并且有一些兼容方案來幫助你在低版本的 IE 瀏覽器中的使用它。

什么是 rem

可能在你使用收音機或者用其他音樂播放器之前，就已經(jīng)聽過“R.E.M.”這個詞了。在這個樂隊眼中，這個詞是“淺睡眠時眼球的快速轉(zhuǎn)動”的縮寫，而在 css 中，rem 代表著“以根元素為參照物的 em 單位“。他不會讓你拋棄你的宗教信仰也不會讓你相信那個遠(yuǎn)在月球的人，但是它可以幫助你實現(xiàn)一個和諧、平穩(wěn)的設(shè)計。

根據(jù) W3C 規(guī)范中對 1rem 的定義：

1rem 與等于根元素 font-size 的計算值。當(dāng)明確規(guī)定根元素的 font-size 時，rem 單位以該屬性的初始值作參照。

這就意味著 1rem 等于 html 元素的字體大?。ù蟛糠譃g覽器根元素的字體大小為16px）

Rem 單位 vs Em 單位

使用 em 單位最主要的問題是他們與用戶元素相關(guān)聯(lián)。在這種情況下，這些元素可以相互嵌套并且造成意想不到的結(jié)果。我們來思考下面一個例子，在根元素的文字大小為默認(rèn)值16px 的情況下，我們想要所有列表的字體大小均為 12px :

html { font-size: 100%;
} ul { font-size: 0.75em;
}

假如有一個列表是嵌套在另一個列表下，那么內(nèi)列表的字體大小將會是外列表字體大小的 75%（也就是 9px ），我們?nèi)匀豢梢酝ㄟ^幾行代碼來解決這個問題：

ul ul { font-size: 1em;
}

這樣就可以解決這個問題，然而我么仍需要特別關(guān)注那些嵌套特別深的元素。

當(dāng)使用 rem 單位后，事情就變得簡單了：

html { font-size: 100%;
} ul { font-size: 0.75rem;
}

當(dāng)所有尺寸都以根元素的文字大小作為參照后，就不再需要為嵌套的元素單獨定義樣式了。

使用 rem 單位定義文字大小

Jonathan Snook 是第一批使用 rem 單位來定義文字大小的開發(fā)者，早在 2011 年 5 月，他就發(fā)表了題為《使用 rem 來定義文字大小》 的文章。和大多數(shù) CSS 開發(fā)者一樣，他必須去解決在 em 單位在復(fù)雜的布局上的一系列問題。

在那時候，老版本的 IE 依然有很大的市場份額，并且他們不可以縮放由 px 來定義的文本。然而，就像我們之前看到的那樣，在使用 em 單位的情況下，很容易忘記元素之前的嵌套關(guān)系，并且得到一個意想不到的結(jié)果。

使用 rem 單位來定義文字的大小最大的問題在于這些值有點難以使用。讓我們來看一個例子，假設(shè)根元素的文字大小是 16px，我們常用的文字大小轉(zhuǎn)換為 rem 值如下：

• 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

正如我們看到的那樣，這些值在計算起來非常不方便。因此，Snook 使用一個叫 62.5 的方式來解決這個問題。然而這并不是一個創(chuàng)新，因為它早已在 em 單位中運用了：

body { font-size:62.5%; } /* =10px */ h1 { font-size: 2.4em; } /* =24px */ p { font-size: 1.4em; } /* =14px */ li { font-size: 1.4em; } /* =14px? */

因為 rem 單位與根元素相關(guān)聯(lián)，Snook 改進(jìn)后的方案變?yōu)榱耍?

html { font-size: 62.5%; } /* =10px */ body { font-size: 1.4rem; } /* =14px */ h1 { font-size: 2.4rem; } /* =24px */

有一點值得考慮的是有一些瀏覽器不支持 rem 單位。因此上面的代碼可以按照以下方式來改寫：

html { font-size: 62.5%;
} body { font-size: 14px; font-size: 1.4rem;
} h1 { font-size: 24px; font-size: 2.4rem;
}

.container { width: 100%;
}

@media (min-width: 85rem) { .container { width: 65rem;
  }
}

然而在媒體查詢中使用 em 和 rem 單位作為媒體查詢的條件時有一個有意思的細(xì)節(jié)：1 rem，1em 還有瀏覽器默認(rèn)文字大小這三值表示這同一個值。這樣做的原因可以在媒體查詢規(guī)范得到解釋（特別強調(diào)）:

詢中相對單位都是以一個初始值作為基準(zhǔn)，這就意味著這些單位永遠(yuǎn)不會基于聲明的結(jié)果。例如：在 HTML 中，em 單位與用戶瀏覽器或者用戶偏好設(shè)置中設(shè)置的初始文字大小有關(guān)，而不是頁面上的樣式中定義的文字大小。

讓我們看一個關(guān)于這個特性的一個小例子：

在 CodePen 上看一個關(guān)于媒體查詢的 demo

首先，在我們的 HTML 文檔中，有一個元素將會展現(xiàn)視口的寬度：

`Document width: <span></span>px`

接下來是兩條媒體查詢語句，一條是使用 rem 單位，另一條使用 em 單位（這里為了簡便，使用了 Sass）

html {
  font-size: 62.5%; /* 62.5% of 16px = 10px */ @media (min-width: 20rem) { /* 20*16px = 320px */ background-color: lemonchiffon;
    font-size: 200%; /* 200% of 16px = 32px */ }

  @media (min-width: 30em) { /* 30*16px = 480px */ background-color: lightblue;
    font-size: 300%; /* 300% of 16px = 48px */（譯：原文是48px）
  }
}

最后，我們使用一點 jQuery 在頁面上顯示視口的寬度，并且在窗口縮放的時候更新這個值：

$('span').text($(window).width());

$(window).on('resize', function(e) {
  $('span').text($(window).width());
});

在開頭，我們使用了 62.5% 這個方法來說明，修改根元素字體大小不會對媒體查詢產(chǎn)生任何影響。當(dāng)我們更改窗口的寬度時，我們可以看到在 320 px 時，第一條媒體查詢開始起作用，到480px第二條媒體查詢開始起作用。任何一條在媒體查詢中對文字大小聲明的改變都沒有起作用。唯一一個可以改變媒體查詢中寬度的是在瀏覽器里更改默認(rèn)文字大小。

因為這個原因，在媒體查詢語句中使用 em 單位還是 rem 單位已經(jīng)不那么重要了。事實上，無論是Foundation v5還是最近剛發(fā)布的Bootstrap v4 alpha都在他們的媒體查詢中使用了 em 單位。

使用 rem 單位來縮放文檔

我們能發(fā)現(xiàn)的第三種使用 rem 單位的方式是去構(gòu)建可縮放組件。使用 rem 來定義元素的寬度，外邊距和內(nèi)邊距 通過使用根元素的字體大小作為一個接口使元素縮放一致變?yōu)榱丝赡堋?我們可以通過下面兩個例子來看這是怎么起作用的。

使用 rem 來縮放文檔實例一

在這個例子里，我們通過媒體查詢中更改根元素的文字大小。就像上一個章節(jié)所講，這樣做的目的是為用戶定制不同設(shè)備下的不同閱讀體驗。通過 rem 單位來表示寬度，外邊距，內(nèi)邊距，這樣所有元素就會基于用戶的設(shè)備大小縮放。

讓我們看另一個例子：

代碼可以看 SitePoint(@SitePoint) 在 CodePen 寫的 《使用 rem 動態(tài)縮放模塊》

在第二個例子中，我們使用 JavaScript 來做同樣的操作。這次用戶根據(jù)自己的需要手動控制界面的大小。我們可以使用多種方式（可以使用數(shù)據(jù)庫，cookie 還有本地存儲）來存儲用戶數(shù)據(jù)，這樣就可以給用戶搭建一個基于用戶偏好的個性化系統(tǒng)。

總結(jié)

在這里總結(jié)一下到目前為止我們對 CSS 中 rem 單位的認(rèn)識。很顯然，在項目中使用 rem 有許多優(yōu)點，比如：響應(yīng)式，可縮放，增加閱讀體驗，增加自定義元素的靈活性。rem 雖然不是一個通用的解決方案，但是通過謹(jǐn)慎的使用，它還是可以解決困擾開發(fā)者多年的問題。 我們每個人都可以去挖掘 rem 的所有潛能。從你的編輯器開始吧，實驗并向我們分享您的成果。

 藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)