CSS中的rem：了解和使用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:
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倍），但它最终迫使开发人员明确地重写他们网站上的所有字体大小。
