PX與EM單位換算

1em 要換成幾 px，先看使用情境

這個換算器用來計算 CSS px 與 em 的雙向數值。兩個欄位可任選一側輸入，另一側會隨之更新；基準字級可自行調整，初始值為 16px。這個 16px 是計算起點，不代表每個網頁元素的 1em 都固定等於 16px。實際結果取決於該 em 所在的 CSS 字級上下文，所以搜尋「1em 等於幾 px」時，必須同時知道採用的基準。

PX 與 EM 的換算公式

令 P 為像素值、B 為基準字級（px）、E 為 em 數值，換算關係如下：

例如基準字級是 16px，24px ÷ 16px = 1.5em；反向計算 1.5em × 16px = 24px。若基準改為 20px，同一個 24px 就是 1.2em。公式沒有改變，改變的是輸入的上下文基準。

CSS 規範將 em 定義為相對於使用它的元素之計算字級；但若 em 寫在 font-size 等字體屬性上，則依父元素的計算字級解析。因此，轉換字級時應填父元素字級；轉換同一元素的內距、外距等尺寸時，應填該元素自身的計算字級。rem 則以根元素字級為參照，本工具這個頁面只處理 px 與 em。CSS 的 px 是規範中的參考像素，不保證等同螢幕上一個硬體像素。

先取得符合 CSS 情境的基準字級

不要只因為常見預設是 16px，就直接套用到所有元素。先確認準備轉換的數值會用在哪個屬性，再查看該情境實際計算後的字級。若 CSS 宣告有繼承或層疊，應以瀏覽器檢視到的計算值為準，而非只讀某一行原始樣式。

1. 確認要轉換的屬性

   若轉換的是 font-size，基準採父元素的計算字級；若是 padding、margin 等使用 em 的尺寸，基準採目標元素自己的計算字級。

2. 輸入基準與數值

   在基準字級欄填入對應的 px 數字，再到 px 或 em 欄輸入欲換算的數值。基準留空或為 0 時，計算會回到 16px。

3. 檢查並複製結果

   確認另一側換算值後，可使用欄位旁的複製按鈕。常用數值區提供 8、12、14、16、18、20、24、32、48、64px 的快速帶入項目；更改基準後，對照數值也會依新基準重算。

4. 放回原樣式驗算

   將數值套用到實際 CSS 後，回到計算樣式確認最終像素尺寸是否符合預期。需要重來時，重置會恢復 16px 基準與 16px 的 px 輸入。

三組可直接核對的換算例子

用途	輸入	基準	結果
設計標註轉 em	14px	16px	0.875em
元件間距轉 em	24px	20px	1.2em
既有 em 反查 px	1.25em	18px	22.5px

例如第一列的 14 ÷ 16 = 0.875，套用時仍要確定 16px 是目標屬性的正確上下文。若實際基準是 18px，14px 應換成約 0.7778em，而不是沿用第一列。

換算時常遇到的幾個問題

1em 一定等於 16px 嗎？

不一定。16px 是本工具的預設基準值；某段 CSS 中的 em 實際換算要看對應上下文的計算字級。基準為 20px 時，1em 對應 20px。

為什麼 font-size 的 em 要看父元素？

font-size 本身正在設定目標元素的字級，因此其中的 em 以父元素繼承來的計算字級為基準；一般尺寸屬性使用 em 時，則參照套用該屬性的元素字級。

同一個 em 數值為什麼在巢狀元素看起來不同？

每個元素可能有不同的計算字級。子元素字級若以 em 繼續放大或縮小，後續尺寸也會隨當前字級上下文改變；逐層查看計算樣式，並按目標屬性選對基準。

這個頁面也能換算 rem 嗎？

不能，這個頁面僅提供 px 與 em 的雙向算術換算。rem 的參照是根元素字級，若要計算 rem，需使用適用於 px/rem 的方式並以根字級作為基準。

小數精度與使用範圍

• 主要換算結果最多顯示 4 位小數，常用值對照最多顯示 3 位小數，末尾多餘的零會省略。若將結果用於對精度有要求的樣式，請依原始數值與 CSS 計算結果再核對。
• 這裡只依輸入數字、基準與公式計算，不會讀取樣式表、判斷繼承／層疊，亦不會判定某個 CSS 屬性是否接受負長度。特定屬性的合法值與限制應以該屬性的規範為準。
• 工具可將可解析的負數作算術換算，但算出數字不代表該值適用於所有屬性。套用前請確認目標屬性的語法、取值範圍與設計需求。