瞭解並使用CSS中的rem單位

什麼是 rem

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

根據 W3C 規範中對 1rem 的定義：

1rem 與等於根項目 font-size 的計算值。當明確規定根項目的 font-size 時，rem 單位以該屬性的初始值作參照。

這就意味著 1rem 等於 html 元素的字型大小(大部分瀏覽器根項目的字型大小為16px)

Rem 單位 vs Em 單位

使用 em 單位最主要的問題是他們與使用者元素相關聯。在這種情況下，這些元素可以相互嵌套並且造成意想不到的結果。我們來思考下面一個例子，在根項目的文字大小為預設值16px 的情況下，我們想要所有列表的字型大小均為 12px :

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

假如有一個列表是嵌套在另一個列表下，那麼內列表的字型大小將會是外列表字型大小的 75%(也就是 9px )，我們仍然可以通過幾行代碼來解決這個問題：

ul ul {   font-size: 1em; }

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

當使用 rem 單位後，事情就變得簡單了：

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

當所有尺寸都以根項目的文字大小作為參照後，就不再需要為嵌套的元素單獨定義樣式了。

使用 rem 單位定義文字大小

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

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

使用 rem 單位來定義文字的大小最大的問題在於這些值有點難以使用。讓我們來看一個例子，假設根項目的文字大小是 16px，我們常用的文字大小轉換為 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 的方式來解決這個問題。然而這並不是一個創新，因為它早已在 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 單位與根項目相關聯，Snook 改進後的方案變為了：

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; }

儘管這個解決方案看起來是最好的解決方案，但還是有人不建議使用這種方式。Harry Roberts 寫了一篇文章，裡面記錄了他在實際使用 rem 單位過程中的一些感受。從他的觀點來看，雖然 62.5% 這種解決方案使得計算變得簡單(因為字型大小以 px 為單位時的值正好是以 rem 為單位的 10 倍)，但是他迫使開發人員重寫他們網站中的所有文字大小。

Chris Coyier 在 CSS-Tricks 提出了第三種解決方案。他的解決方式充分利用了到目前為止我們遇到的三種單位。根項目的長度單位依舊採用 px ，模組用 rem 單位，模組內的元素使用 em 單位。這種方式可以很容易的操作根項目的大小、縮放模組，模組內內容的大小以模組自身文字大小來進行縮放。Louis Lazaris 隨後在 CSS 中 em 單位的強大之處 提出了他的觀點。

在下面的例子中你可以看出 Chris 的解決方案是怎麼工作的：

代碼可以看 SitePoint(@SitePoint點擊預覽) 在 CodePen 寫的 《在 CSS 中使用 em 和 rem 單位的方式》點擊預覽。

正如你看到的那樣，沒有利用新技術來解決這個問題。可能一些組合方式僅僅被開發人員的想象力所限制。

在媒體查詢中使用 rem 單位

在媒體查詢中利用 em 和 rem 單位，與“行的最佳長度”的概念密切向關，並能給使用者帶來流暢的閱讀體驗。在 2014 年 9 月，Smashing Magazine 在 web typography 發表了一篇名叫 尺寸那些事: 在 web 響應式設計中掌握文字大小與行寬度的平衡的文章。最有意思的是，文章給出了行的最佳寬度度，45 到 85 個字元(包括空格和標點符號)，65 是最理想的行寬值。

粗略的估計一個位元組大小就是 1rem，利用這個方法我們就可以用一種移動優先的方式控制內容的單行文字資料流：

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

然而在媒體查詢中使用 em 和 rem 單位作為媒體查詢的條件時有一個有意思的細節：1 rem，1em 還有瀏覽器預設文字大小這三值表示這同一個值。這樣做的原因可以在媒體查詢規範得到解釋(特彆強調):

詢中相對單位都是以一個初始值作為基準，這就意味著這些單位永遠不會基於聲明的結果。例如：在 HTML 中，em 單位與使用者瀏覽器或者使用者喜好設定中設定的初始文字大小有關，而不是頁面上的樣式中定義的文字大小。

讓我們看一個關於這個特性的一個小例子：

在 CodePen 上看一個關於媒體查詢的 demo

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

`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% 這個方法來說明，修改根項目字型大小不會對媒體查詢產生任何影響。當我們更改視窗的寬度時，我們可以看到在 320 px 時，第一條媒體查詢開始起作用，到480px第二條媒體查詢開始起作用。任何一條在媒體查詢中對文字大小聲明的改變都沒有起作用。唯一一個可以改變媒體查詢中寬度的是在瀏覽器裡更改預設文字大小。

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

使用 rem 單位來縮放文檔

我們能發現的第三種使用 rem 單位的方式是去構建可縮放組件。使用 rem 來定義元素的寬度，外邊距和內邊距 通過使用根項目的字型大小作為一個介面使元素縮放一致變為了可能。 我們可以通過下面兩個例子來看這是怎麼起作用的。

使用 rem 來縮放文檔執行個體一

在這個例子裡，我們通過媒體查詢中更改根項目的文字大小。就像上一個章節所講，這樣做的目的是為使用者定製不同裝置下的不同閱讀體驗。通過 rem 單位來表示寬度，外邊距，內邊距，這樣所有元素就會基於使用者的裝置大小縮放。

讓我們看另一個例子：

代碼可以看 SitePoint(@SitePoint點擊預覽) 在 CodePen 寫的 《使用 rem 動態縮放模組》點擊預覽

在第二個例子中，我們使用 JavaScript 來做同樣的操作。這次使用者根據自己的需要手動控制介面的大小。我們可以使用多種方式(可以使用資料庫，cookie 還有本機存放區)來儲存使用者資料，這樣就可以給使用者搭建一個基於使用者偏好的個人化系統。

總結

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

