相對單位怎麼用?讓專業前端工程師幫幫你!

前端工程師另一個愛用的相對單位該怎麼用?看完本篇就學會囉!

相對單位

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 為每個元素透過「倍數」乘以「根」元素 (就是它的「最」上層元素，通常都是靠CSS來改變預設大小) 的 px 值。如下例所示：若預設字體大小為 16px，假設在CSS碼中，設定每一層 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教學!

達內時代科技教育集團簡介

Java課程讓我百萬年薪科技新貴之路只需要六個月!

網路行銷課程讓你與主關鍵字搭上邊,增加Google得分

教育導入AI 人工智慧,或許可以讓學習不再死板!