1. 程式人生 > >Rem與Px的轉換

Rem與Px的轉換

remCSS3中新增加的一個單位值,他和em單位一樣,都是一個相對單位。不同的是em是相對於元素的父元素的font-size進行計算;rem是相對於根元素htmlfont-size進行計算。這樣一來rem就繞開了複雜的層級關係,實現了類似於em單位的功能。

Rem的使用

前面說了em是相對於其父元素來設定字型大小的,這樣就會存在一個問題,進行任何元素設定,都有可能需要知道他父元素的大小,在我們多次使用時,就會帶來無法預知的錯誤風險。而rem是相對於根元素<html>,這樣就意味著,我們只需要在根元素確定一個參考值,這個參考值設定為多少,完全可以根據您自己的需求來定。

假設就使用瀏覽器預設的字號16px

,來看一些px單位與rem之間的轉換關係:

|  px  |     rem       |
------------------------
|  12  | 12/16 = .75   |
|  14  | 14/16 = .875  |
|  16  | 16/16 = 1     |
|  18  | 18/16 = 1.125 |
|  20  | 20/16 = 1.25  |
|  24  | 24/16 = 1.5   |
|  30  | 30/16 = 1.875 |
|  36  | 36/16 = 2.25  |
|  42  | 42/16 = 2.625 |
|  48  | 48/16 = 3     |
-------------------------        

如果你要設定一個不同的值,那麼需要在根元素<html>中定義,為了方便計算,時常將在<html>元素中設定font-size值為62.5%:

html {
    font-size: 62.5%; /* 10 ÷ 16 × 100% = 62.5% */
}

相當於在<html>中設定font-size10px,此時,上面示例中所示的值將會改變:

|  px  |     rem        |
-------------------------
|  12  | 12/10 = 1.2    |
|  14  | 14/10 = 1.4    |
|  16  | 16/10 = 1.6    |
|  18  | 18/10 = 1.8    |
|  20  | 20/10 = 2.0    |
|  24  | 24/10 = 2.4    |
|  30  | 30/10 = 3.0    |
|  36  | 36/10 = 3.6    |
|  42  | 42/10 = 4.2    |
|  48  | 48/10 = 4.8    |
-------------------------        

由於rem是CSS3中的一個屬性,很多人首先關注的就是瀏覽器對他的支援度,我截了一張caniuserem屬性的兼容表:

從上圖可以清楚的知道,rem在眾多瀏覽器中都已得到很好的支援,如果您的專案不用考慮IE低版本的話,你就可以放心的使用了,如果您的專案在IE低版本中還佔有不少的比例,那麼你還在擔心使用rem不能相容,而不敢使用。其實是沒有必要的,可以針對低版本的IE瀏覽器做一定的處理:

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

這樣一來解決了IE低版本的不能相容的問題,但生出另一個不足地方,就是增加了程式碼量。必竟魚和熊掌很多時候不能兼得嘛。

如果你想更深入的瞭解rem如何使用,建議您閱讀: