REM實戰

發表於2015-11-09
REM

前兩天有個朋友問起關於rem的一些問題，讓我有些在意。因為隨著CSS3的逐漸成熟，在優雅降級/漸進增強原則的保障下，很多CSS新特性已經不在是試用特性，而是在Web設計中得到廣泛推行和應用！而CSS3新增的單位rem也在其列，當朋友問起時，我才意識到自己對這個單位也並不是很瞭解，趁著週末有些閒暇時光，不妨給自己的大腦充充電。

定義

Equal to the computed value of font-size on the root element. (W3C)

直譯是“與根元素的字型大小相等”，當然也有一種更直接的理解 root em 。我們知道在HTML中根元素其實也就是 <html> 元素，所以rem單位其實是相對於 <html> 元素的字型大小而言的。

場景

為了方便說明rem單位的功效，我們先來構造一個很常用的頁面結構，然後分別使用px和rem在對比實現。通常我們在製作博文閱讀頁面的時候都會先將博文的標題(h2.article-title)顯示，然後後面緊跟豐富的博文內容(div.article-body)，最後可能還會在博文的尾部(div.article-foot)顯示作者或釋出時間等等。而為了讓文章的結構更為清晰，我們一般會將文章的標題放大突出顯示，而結尾可能也會做縮小弱化處理，大致結構如下：

我們可能希望在頁面上顯示的效果是這樣的：

我們這裡不去關心佈局，只看字號：標題18px，內容14px，尾部12px。接下來我們來看看如何分別使用px和rem來實現預覽樣式。

px VS rem

首先是使用px實現：

然後，我們看看rem版本：

為了驗證rem單位最終在瀏覽器上顯示的字型大小確實是預設的18px，14px和12px，我使用Chrome除錯工具在Elements皮膚的Computed皮膚檢視了結果：

好了，說明rem最終實現的效果確實可以達到和直接使用px一樣的結果。但是單從上面的程式碼來看，我們發現使用rem其實比使用px需要更多的程式碼，而且也並沒有發現其他什麼優勢，那麼CSS3為什麼會增加這個單位呢？

rem的優勢

我們從上面的程式碼中可以發現，在使用rem的時候，我們給標題、內容、尾部設定字型的時候使用的是一個小數，而最終我們在瀏覽器中看到的卻是我們需要的18px、14px和12px，結合定義部分提到的rem是相對於根(html)元素計算的，那麼就好理解了，以標題為例： 10px * 1.8 = 18px  。所以，rem的優勢便不言而喻了，可以通過修改html元素的font-size直接控制整個網站的字型乃至其他尺寸屬性的值的大小（諸如：margin，padding等）。

那麼，有人可能會問：我的網頁放在那裡顯示得好好的，我沒事改什麼字型大小，調什麼間距？即便久了我想換換風格，那也可能改改顏色，換換佈局，跟這尺寸單位壓根兒沒多大關係吧？

其實並不是這樣的，我來給大家說兩個情況。

第一，我們做網頁，要考慮到訪問我們網頁的各個群體。要考慮視力好的，也要考慮視力差的；要考慮喜歡看大字多翻頁的，也要考慮看小字多顯示內容的。所以當有一天我們的網頁需要增加一個點選按鈕切換大、正常、小甚至更多字號的時候，你就會意識到rem是多麼的讓你感動了。還是以上面的場景為例，我們假設通過在html標籤上增加class來切換字型。

先看px的：

再看看使用rem的：

 

其優勢，就不用我再多說了吧？

第二，在移動智慧裝置劇增，響應式網頁設計如此火熱的時代，我們在設計網頁的時候，怎能不考慮移動裝置，怎能不考慮移動裝置高清屏？！通常移動裝置的顯示區域比起傳統PC電腦已經少了很多很多，如何能在更小的區域顯示更多的內容，一直是裝置產商和開發者們努力的方向。高清屏的出現很大程度上解決了這個問題，有了高清屏就意味著在傳統PC上的字號即便縮小一半，放到高清屏上仍然能夠保證清晰可識別，不影響閱讀，也不會導致資訊丟失。所以，現在網頁設計的時候通常會考慮在PC和Mobile中使用不同的字號等樣式，那麼問題來了，還是像第一個問題一樣，在媒體查詢中一個一個字號去覆蓋嗎？這顯然是不科學的做法，雖然能達到我們想要的效果，但是成本是相當高的，而且費力不討好。還是以上面的場景為例。

還是先看px的：

再看rem版本的：

 

好了，不舉其他的了，相信肯定還有更多的應用場景，但是這兩個需求已經有足夠的理由讓我們去學習和嘗試使用rem了。

好東西也有煩惱

至此，rem的優勢不用再多說了，但是這麼好的東西，我們在實際使用中卻並非盡如人意：

這是在caniuse上截下來的rem的相容性情況，看到左上角那塊耀眼的紅色了麼？在國內IE覆蓋還非常廣泛的情況下，這塊紅色帶給開發者的痛是痛徹心扉的，但是作為開發者，作為使用者體驗的服務方，我們很多情況下沒理由去放棄他們，那麼怎麼解決rem的相容性問題呢？

其實，也不難！CSS中不可被識別的屬性或值會被瀏覽器自動忽略，所以，當我們在使用rem的時候，只要再增加一個px單位的尺寸，那麼就可以解決IE8及以下版本瀏覽器的相容性問題：

 

總結

rem是一個非常有用的單位，在網頁設計中常常可以帶來事半功倍的效果，但是並不意味著rem可以替代所有的單位，有時候結合使用，相互配合，反而會達到意想不到的效果。然而，新東西的出現雖然總能讓人耳目一新，但是卻也常常會伴隨著很多讓人苦惱的坑，還需要我們慢慢去雕琢，慢慢去完善。

相關文章