前端工程師必學的CSS字體單位有兩種,絕對單位與相對單位!
在 CSS ，字體單位可以分為兩大類：絕對 (absolute) 單位以及相對 (relative) 單位：
分別介紹如下：
rem 是 CSS 單位，跟 em 的差別是，em 是每個元素乘以其上一層元素 (就是父元素) 的值；而 rem 為每個元素透過「倍數」乘以「根」元素 (就是它的「最」上層元素，通常都是預設大小) 的 px 值。如下例所示：若預設字體大小為 16px，如果每一層 div 都使用 1.5rem，無論是第一層子元素還是第五層的子元素，大小永遠是 16px x 1.5 = 24px。
% 是相對單位，跟 em 一樣都為每個元素乘以其上一層元素 (就是父元素) 的值，差別只是 em 是倍數單位；而 % 就是百分比單位。如在預設字體為 16px 的前題下，如果 前端工程師 每一層 div 區都設定為 150%，則第一層子元素就是 16px x 150% = 24px；第二層子元素就是上一層元素的 150%，為 24px x 150% = 36px；由此類推...到第五層就會是 16px x 150% x 150% x 150% x 150% x 150% = 121.5px。
larger 和 smaller 就是以上一層 (父層) 的固定百分比為單位，larger 為父層的 120%，smaller 為父層的 80%。
推薦閱讀:
前端工程師必學的CSS字體單位(上):絕對單位篇
前端工程師的必須要知道的: CSS語法的繼承關係
前端工程師的基礎:使用CSS樣式表轉換到HTML
網路行銷課程第八課- 靠KISS讓全世界愛上你?
哈佛商業評論公布的這十位人工智慧領航者,讓AI有一個燦爛的開始
網路行銷課程的SEO白黑帽分不清楚,你的SEO之路會很危險!
網路行銷課程和程式設計結合促成社群行銷;成本降低,效率加倍!
在 CSS ，字體單位可以分為兩大類：絕對 (absolute) 單位以及相對 (relative) 單位：
分別介紹如下：
| 目錄 相對單位 em rem % larger, smaller |
相對單位
em
em 是 CSS 相對單位，每個子元素透過「倍數」乘以它的父元素 (上一層元素) 的值。像是以下例子所顯示的：在預設字體 16px 的前題下，如果 前端工程師 每一層 div 區都設定為 1.5em，那麼第一層子元素就是 16px x 1.5 = 24px；而第二層子元素就是上一層元素的 1.5 倍，為 24px x 1.5 = 36px；由此類推...到第五層就會是 16px x 1.5 x 1.5 x 1.5 x 1.5 x 1.5 = 121.5px。rem
rem 是 CSS 單位，跟 em 的差別是，em 是每個元素乘以其上一層元素 (就是父元素) 的值；而 rem 為每個元素透過「倍數」乘以「根」元素 (就是它的「最」上層元素，通常都是預設大小) 的 px 值。如下例所示：若預設字體大小為 16px，如果每一層 div 都使用 1.5rem，無論是第一層子元素還是第五層的子元素，大小永遠是 16px x 1.5 = 24px。
%
% 是相對單位，跟 em 一樣都為每個元素乘以其上一層元素 (就是父元素) 的值，差別只是 em 是倍數單位；而 % 就是百分比單位。如在預設字體為 16px 的前題下，如果 前端工程師 每一層 div 區都設定為 150%，則第一層子元素就是 16px x 150% = 24px；第二層子元素就是上一層元素的 150%，為 24px x 150% = 36px；由此類推...到第五層就會是 16px x 150% x 150% x 150% x 150% x 150% = 121.5px。
larger / smaller
larger 和 smaller 就是以上一層 (父層) 的固定百分比為單位，larger 為父層的 120%，smaller 為父層的 80%。
See the Pen #demo-larger, smaller by Tedutw (@Tedutw) on CodePen.
推薦閱讀:
前端工程師必學的CSS字體單位(上):絕對單位篇
前端工程師的必須要知道的: CSS語法的繼承關係
前端工程師的基礎:使用CSS樣式表轉換到HTML
網路行銷課程第八課- 靠KISS讓全世界愛上你?
哈佛商業評論公布的這十位人工智慧領航者,讓AI有一個燦爛的開始
網路行銷課程的SEO白黑帽分不清楚,你的SEO之路會很危險!
網路行銷課程和程式設計結合促成社群行銷;成本降低,效率加倍!