深入了解 CSS 中的 rem 機關，它是具有良好浏覽器支援的相對大小調整的機關，這裡來學習如何有效地使用它們。
什麼是 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:
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倍），但它最終迫使開發人員明确地重寫他們網站上的所有字型大小。
但是這也是國内移動端布局最常用的一種方法。我們就在這裡結束對 CSS rem 機關的介紹了。我們來說一下他的優點，這裡就不用了案例來示範了，大家可以自己嘗試一下。
在我們的代碼中使用這些機關有很多優點，比如
響應性、
可伸縮性、
改進的閱讀體驗以及在
定義元件時更大的靈活性。rem 機關不是通用的萬能解決方案，但是通過精心部署，它們可以解決許多困擾開發人員多年的問題。這取決于我們每個人去釋放 rem 的全部潛力。