什麼是 PX 轉 EM 換算器?
PX 轉 EM 換算器能將像素數值轉換成 CSS 中常用的 em 單位。像素(px)屬於絕對單位,而 em 則是相對單位,會依基準字型大小做縮放。採用 em 進行排版,能讓版面更具彈性,也更易於無障礙設計,因為元素會隨著使用者的字型偏好一起縮放。
如何使用
輸入你想換算的像素值,以及以像素為單位的基準字型大小。大多數瀏覽器預設的根字型大小為 16px,因此 16 是最常用的基準值。按下計算,即可看到對應的 em 數值。
公式說明
換算方式很單純,就是一個除法:
$$\text{EM} = \frac{\text{Pixel value (px)}}{\text{Base font size (px)}}$$
若基準字型大小為 16px,則 16px 等於 1em、24px 等於 1.5em、8px 等於 0.5em。選對基準值非常關鍵:em 是相對於「父層元素」的字型大小,而這個值不一定和根元素相同。
實際範例
假設你想在基準字型大小為 16px 的情況下換算 24px。套用公式:$$24 \div 16 = 1.5\,\text{em}$$也就是說,24px 的標題會等於 1.5em。
常見問題
我該使用哪個基準字型大小?請使用該元素「父層」的字型大小。若是針對根層級的換算,瀏覽器的典型預設值為 16px。
em 和 rem 有什麼差別?em 是相對於父層元素的字型大小;rem 則永遠相對於根元素(root)的字型大小。
為什麼要用 em 而不是 px?em 會隨使用者的字型設定縮放,有助於提升無障礙體驗與響應式設計效果。