字型大小與 rem

CSS3 引入了一些新的單元,包括 rem 單元,代表 root em。讓我們來看看 rem 是如何工作的。

首先,我們來看看 emrem 之間的區別。

  • 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 */
}