我們都知道基於像素的字體大小所用的單位是px，但是隨着響應式設計的不斷火熱，基於相對字體大小的單位em變開始流行起來。當然，rem也在Web前端開發人員討論如何更好設置字體大小的討論話題之列。是不是需要用em或者是rem來替換掉px在前端開發中進行使用呢？
為什么我們需要使用相對字體大小呢？
或許我們最能直接想到的一點就是它關於CSS3的一些東西。很好理解的是它是一種字號計算方式，尤其是當你在為多種分辨率進行字號計算的時候。想想要在手機上實現字體變大或者變小的時候，你不得不要反復重新計算對象的字體大小，這是相當耗時間的。這個時候相對字體大小的設置才凸顯出了它的有用之處。當你要在不同的樣式結構中進行設置字體大小的時候，使用em或者rem能夠讓你針對一個具體的視屏進行字體大小的增大或者減小。
px，em，rem的區別在哪？
Px是一個絕對字體大小，em則是基於基數（比如：1.5em）來計算出來的相對字體大小。這個基數是需要乘以當前對象從其父級遺傳字體大小。
|
1
|
1.5em = 父級字體大小 * 1.5 = ?
|
不過，這有個問題就是在css中想要知道當前元素的字體大小所遺傳的是哪個父級元素的字號。因此，rem的出現就很好的解決了這個問題。rem是基於根節點（比如html）的字體大小進行計算的。
|
1
|
1.5rem = 默認字體大小 (比如： 16px) * 1.5 = 24px
|
這個默認字體大小是依據你網站當前訪問時所使用的瀏覽器或者其他設備來決定的，對於桌面瀏覽器默認是16px的字體大小。然后你現在要轉換當前元素的字體大小為rem的時候你就可以這樣做：
|
1
|
28px = 28/16 = 1.75rem
|
為了更方便的進行計算轉換，你可以把默認字體大小設置成62.5%或者是10px，這個時候你要計算當前元素字體大小的時候，你就可以這樣：
|
1
|
28px = 28/10 = 2.8rem
|
rem的瀏覽器支持
目前大多數瀏覽器都支持rem單位的字體大小，不過，要想兼容IE7和IE8，你還是需要使用px來做單位。寫法如下：
|
1
|
html { font-size: 62.5%; }
|
|
1
|
p { font-size: 15px; font-size: 1.5rem; } /* =15px */
|