什么是 rem 單位？
rem（font size of the root element）是指相對於根元素的字體大小的單位。簡單的說它就是一個相對單位。看到rem大家一定會想起em單位，em（font size of the element）是指相對於父元素的字體大小的單位。它們之間其實很相似，只不過一個計算的規則是依賴根元素一個是依賴父元素計算。
根據 W3C 規范，一個對象單位的定義是:
相對於根元素上font-size的計算值。 在根元素的font-size屬性中指定時，rem單位是指屬性的初始值
這意味着1rem等於html元素的字體大小（對於大多數瀏覽器而言，其默認值為16px）。
Rem 單位 VS Em 單位
em 單位的主要問題是它們與自己元素的字體大小有關。因此，它們可能會層疊起來並導致意想不到的結果。讓我們考慮一下下面的例子，如果根字體大小是默認的16px，我們希望列表的字體大小為12px：
<style type="text/css"> html{ font-size: 100%; } ul{ font-size: 0.75em; } </style> <body> <ul> 你好 <ul> 你好 </ul> </ul> </body>
上面可以看到我們本來是想讓所有列表的字體大小為 12px，但是如果我們在另一個列表中嵌套了一個列表，那么內部列表的字體大小將是其父列表的75% (在本例中為9px)。
我們仍然可以通過以下方法來解決這個問題:
ul ul { font-size: 1em; }
這里是可以解決問題，但是我們仍然必須得非常注意嵌套變得更深的情況。
有了 rem 單位，事情就簡單多了:
html { font-size: 100%; } ul { font-size: 0.75rem; }
由於所有大小都是根據根字體大小引用的，因此不再需要在單獨的聲明中覆蓋嵌套大小寫。
帶Rem單位的字體大小
使用rem單位進行字體大小調整的先驅之一是Jonathan Snook，他在2011年5月發表了REM字體大小調整文章。像其他許多CSS開發人員一樣，他不得不面對em單位帶來的復雜布局問題。
在那個時候，舊版本的 IE 仍然有很大的市場份額，他們不能放大文本的大小與像素。然而，正如我們在前面看到的，使用 em 單位很容易丟失嵌套的軌跡並得到意想不到的結果。
將 rem 用於字體大小調整的主要問題是，這些值有點難以使用。讓我們來看一些常見的字體大小的例子，這些字體大小以 rem 單位表示，當然假設基本大小是16px:
CSS3的出現，他同時引進了一些新的單位，包括我們今天所說的rem。在W3C官網上是這樣描述rem的——“font size of the root element” 。下面我們就一起來詳細的了解rem。
rem是相對於根元素<html>，這樣就意味着，我們只需要在根元素確定一個參考值，在根元素中設置多大的字體，這完全可以根據您自己的需，大家也可以參考下圖：
下面再來看一個簡單的實例：
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/} body {font-size: 1.4rem;/*1.4 × 10px = 14px */} h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
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 */
這里可以看到，實際 px 除以10就可以得到 rem大小。這里還必須考慮到其他不支持 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倍），但它最終迫使開發人員明確地重寫他們網站上的所有字體大小。