CSS字型大小 em, pt, px, rem 筆記

1em = 100% = 12pt = 16px

px 為像素,通常遊覽器預設尺寸為16px,也為100%

% 百分比符號,已預設尺寸做百分比如 75% = 12px

pt 通常用於列印,相當於1/72inch,或是1.333px

em 是相對的的數值單位,它會受到外圍的文字大小所影響,而 1em 即是 1 的文字大小, 1.5em 也就是 1.5 倍的文字大小。如外圍父層字型大小為20px,本階層為1.5em,則本階層的字型大小換算為 20 * 1.5 = 30px。

rem 也是相對的文字尺寸,和 em 使用方法接近,不同的是他僅相對於 root 層級的文字大小(網頁中的 html)。如上述例子,外層大小並不會影響本階層,唯一會影響的只有html裡面的文字大小,故 1.5rem 會得到 16 * 1.5 = 24px。