透過 MCP 連接 →

輸入計算

數學公式

廣告

結果

對應的 EM 數值
1
em
像素值 16 px
基準字型大小 16 px
計算結果 1 em

什麼是 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 是相對於「父層元素」的字型大小,而這個值不一定和根元素相同。

展示像素值除以基準字級等於 em 值的示意圖
em 值是像素值除以以像素為單位的基準字級。

實際範例

假設你想在基準字型大小為 16px 的情況下換算 24px。套用公式:$$24 \div 16 = 1.5\,\text{em}$$也就是說,24px 的標題會等於 1.5em。

將 16 像素基準下的 24 像素轉換為 1.5 em 的範例
範例:在 16px 基準下,24px 等於 1.5em。

常見問題

我該使用哪個基準字型大小?請使用該元素「父層」的字型大小。若是針對根層級的換算,瀏覽器的典型預設值為 16px。

em 和 rem 有什麼差別?em 是相對於父層元素的字型大小;rem 則永遠相對於根元素(root)的字型大小。

為什麼要用 em 而不是 px?em 會隨使用者的字型設定縮放,有助於提升無障礙體驗與響應式設計效果。

最後更新: