字体大小与 rem

Created: November-22, 2018

CSS3 引入了一些新的单元，包括 rem 单元，代表 root em。让我们来看看 rem 是如何工作的。

首先，我们来看看 em 和 rem 之间的区别。

em ：相对于父级的字体大小。这导致复合问题
rem ：相对于 root 或 <html> 元素的字体大小。这意味着可以为 html 元素声明单个字体大小，并将所有 rem 单位定义为该百分比。

使用 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

码：

Version >= 3

html { 
  font-size: 16px; 
}

h1 { 
  font-size: 2rem;          /* 32px */
}

p { 
  font-size: 1rem;          /* 16px */ 
}

li { 
  font-size: 1.5em;         /* 24px */
}