Rem與Px的轉換

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

rem的使用

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

假設就使用瀏覽器預設的字型大小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 |

-------------------------

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

html

相當於在中設定font-size為10px，此時，上面示例中所示的值將會改變：

| 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在眾多瀏覽器中都已得到很好的支援，如果您的專案不用考慮ie低版本的話，你就可以放心的使用了，如果您的專案在ie低版本中還占有不少的比例，那麼你還在擔心使用rem不能相容，而不敢使用。其實是沒有必要的，可以針對低版本的ie瀏覽器做一定的處理：

html

body /* =14px */

h1 /* =24px */

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

**：