搞清楚前端工程師的字體世界!-相對單位

 

學完前端工程師字體的絕對單位小常識之後,相對單位也超級重要!學完兩個單位後,字體根本就難不倒我!

 

CSS ,字體單位可以分為兩大類:絕對 (absolute) 單位以及相對 (relative) 單位:(本篇介紹主要介紹相對單位

分別介紹如下:

目錄
1. 絕對單位
  px (pixel 畫素)
  cm / pt / in / pc / mm
  large, medium, small
2. 相對單位
em
rem
%
larger, smaller

 

 

另一個前端工程師必知的字體單位:相對單位

em

em 是相對單位,為每個子元素透過「倍數」乘以它的父元素 (上一層元素) 的值。讓我們為前端工程師舉以下例子:在預設字體為 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.

 

%

% 也是CSS字體類別中的相對單位,跟 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碼的Class選擇器宣告法

HTML5教學小撇步一-用免費的編輯器寫HTML吧!!

想成為第二個馬斯克嗎?讓Python課程帶你進入自動駕駛車的行列!

搶救低薪大作戰,再不來上Java課程就來不及了!

中國IT教育領導品牌 達內教育集團第一家海外授權中心

 

 

 

 

arrow
arrow

    Uder.chain 發表在 痞客邦 留言(0) 人氣()