字型大小與 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 */
}