了解和使用CSS中的rem单位，web前端开发资料

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（基本）

• 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; }