未分類

前端工程師必學的CSS字體單位解釋(下)-相對單位篇

2019-03-20

延續上篇文章前端工程師必學的CSS字體單位,這篇要介紹的是CSS中的相對單位!

延續上篇文章前端工程師必學的CSS字體單位,這篇要介紹的是CSS中的相對單位!
延續上篇文章前端工程師必學的CSS字體單位,這篇要介紹的是CSS中的相對單位!

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。

See the Pen

#demo-em by Tedutw (@Tedutw)

on CodePen.

 

 

 

 

rem

 

rem 是相對單位,跟 em 的差別是,em 是每個元素乘以其上一層元素 (就是父元素) 的值;而 rem 為每個元素透過「倍數」乘以「根」元素 (就是它的「最」上層元素,通常都是預設大小) 的 px 值。如下例所示:

前端工程師若預設字體大小為 16px,如果每一層 div 都使用 1.5rem,無論是第一層子元素還是第五層的子元素,大小永遠是 16px x 1.5 = 24px。

See the Pen

#demo-rem by Tedutw (@Tedutw)

on CodePen.

 

 

 

%

% 是相對單位,跟 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。

See the Pen

#demo-% by Tedutw (@Tedutw)

on CodePen.

 

 

 

larger / smaller

larger 和 smaller 就是以上一層 (父層) 的固定百分比為單位,larger 為父層的 120%,smaller 為父層的 80%。

See the Pen

#demo-larger, smaller by Tedutw (@Tedutw)

on CodePen.

相關閱讀:

前端工程師必學的CSS字體單位解釋(上)-絕對單位篇

前端工程師必學-CSS盒子模式(上)屬性和邊界

前端工程師必學-CSS盒子模式(下)邊框和留白

SEO優化小祕密:利用排版變化蹦出新意

Python課程當你的好朋友幫助你

幫百度訓練AI要靠Python課程!?其實你只要需要…

HTML5教學之CSS基礎語法:如何設定字型與文字排列

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料