像素轉 EM/REM 轉換器
所有工具
免費
透過即時表格與可直接複製的 CSS 轉換 px、rem、em、pt 與 %
要轉換的值
px
px
rem 相對於根字型大小；em 與 % 相對於父層。
轉換後的值
px
0
rem
0
em
0
pt
0
%
0
常用值
| PX | REM | EM | PT |
|---|---|---|---|
| 10 | — | — | — |
| 12 | — | — | — |
| 14 | — | — | — |
| 16 | — | — | — |
| 18 | — | — | — |
| 20 | — | — | — |
| 24 | — | — | — |
| 28 | — | — | — |
| 32 | — | — | — |
| 40 | — | — | — |
| 48 | — | — | — |
| 64 | — | — | — |
CSS 程式碼片段
關於 像素轉 EM/REM 轉換器
像素轉 EM/REM 轉換器可在 px、rem、em、pt 與 % 之間轉換 CSS 長度值。輸入五種單位中任一個的數值，即時表格會顯示它在其他所有單位中的對應值 — 還附上可直接貼到樣式表中使用的 CSS 程式碼片段。
轉換方式完全符合 CSS 實際的單位解析規則：rem 相對於根元素字型大小，而 em 與 % 則相對於父層元素的字型大小。這兩個參考尺寸皆可編輯，因此你可以模擬 16px 根字型搭配 14px 元件，或任何你使用的設計系統比例。
常用數值表列出設計師最常用到的尺寸 — 因此「24px 等於多少 rem」這類問題一眼就能得到答案。這款工具免費、隨輸入即時更新，是將固定像素設計稿轉換成無障礙、可縮放 rem 式 CSS 的必備工具。
如何使用 像素轉 EM/REM 轉換器
- 輸入要轉換的數值並選擇其單位：px、rem、em、pt 或 %。
- 若根字型大小(用於 rem)或父層字型大小(用於 em 與 %)不是 16px，請調整這些數值。
- 在即時表格中查看轉換後的數值。
- 複製產生的 CSS 程式碼片段，或常用數值表中的任何數值。
常見問題
rem 永遠相對於根元素(html)的字型大小，而 em 則相對於目前元素繼承來的字型大小。巢狀的 em 值會逐層疊加，這也是為什麼 rem 在版面配置上通常更容易預測。
在預設 16px 根字型大小下，16px 恰好等於 1 rem。若更改根字型大小欄位，轉換器會重新計算 — 例如根字型為 18px 時，16px 會變成約 0.889 rem。
rem 值會隨使用者變更瀏覽器基礎字型大小而縮放，讓需要較大字級的人也能看清文字。固定的 px 尺寸則會忽略這項偏好設定，不利於無障礙體驗。
CSS 定義 1pt 為 1/72 英寸，1px 為 1/96 英寸，因此 1pt = 1.333px，12pt = 16px。點主要出現在印刷樣式表以及從文字處理軟體匯入的文件中。
在字型大小方面，% 相對於父層元素的字型大小，就像 em 一樣：100% 等於父層尺寸，因此 16px 父層的 87.5% 就是 14px。請將父層尺寸欄位設定為符合你實際情境的值。
熱門搜尋
px 轉 rem 轉換器
px 轉 em 轉換器
像素轉 rem
rem 轉 px
css 單位轉換器
px em rem 計算機
需要協助？
使用此工具時遇到問題？請告訴我們的團隊。