各種單位的探討

CSS 單位 參考整理表

• w3schools CSS 單位整理表 - 英文版
• RUNOOB CSS 單位整理表 - 簡中版

絕對式單位

單位	說明	CSS3
px	像素

相對式單位

單位	說明	CSS3
em	相對於父層字體大小的倍數。 例如: 父層是24px, 子層設定 2em = 24px*2 = 48px。
rem	相對於 html 字體大小的倍數 (相當於瀏覽器的整體預設，預設是16px)。 例如: 設定 2rem = 16px*2 = 32px。	V
vw	viewpoint width, 相對於視窗寬度的百分比，例如: 設定 1vw = 視窗寬度的 1%。	V
vh	viewpoint height, 相對於視窗高度的百分比，例如: 設定 1vh = 視窗高度的 1%。	V
vmin	vw 和 vh 中較小的那個。	V
vmax	vw 和 vh 中較大的那個。	V
%	相對父層的百分比例。

測試練習：em vs rem 參考結果