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。

 

美美的CSS動態ProgressBar

後端其實常常會遇到一些執行時間比較長的請求,通常這類型的請求都是先立即回傳一個名牌或ID,然後在後端背景排隊執行,前端透過這個ID或名牌來確認執行進度。在等待的同時,如果前端能回饋使用者進度條,相信整個體驗會更友善。講到這裡,也讓我興起想練習CSS去寫一個進度條,剛好看到這裡有一個不錯的CSS進度條,就拿起來用SCSS的方式改寫練習練習。

顯示完整資訊