在react next 中使用rem_CSS中的rem：了解和使用rem单位

深入了解 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 的全部潜力。