CSS 單位轉換
px、rem、em 與 pt
使用可設定基礎字型大小轉換 CSS px、rem、em 和 pt 值，適用於設計 token、排版和響應式版面。
此轉換僅在您的瀏覽器中執行，不會上傳任何內容。
px
- 根 / 基準字型大小16px
- 單位px
真實 CSS 中 em 取決於父元素的 font-size；本工具用同一根/基準值近似換算 rem 與 em。
- px
- rem
- em
- pt
這個工具是什麼？
用可設定的根 / 基準字型大小（預設 16px）在 CSS px、rem、em、pt 之間轉換。適合設計 token、排版比例與響應式 spacing。
真實 CSS 中 rem 相對根元素，em 相對目前（常為父）元素的 font-size。本工具對 rem/em 使用同一基準，因此 em 為近似值。pt 按 CSS 96dpi（1pt = 96/72 px）。
When to use
- 把設計稿 px 換成 rem 間距與字級階梯
- 根字號不是 16px 時核對
1.5rem/12pt - 整理樣式指南的 px ↔ rem token 表
- 將印刷向 pt 與螢幕 CSS 對照
如何使用
- 輸入數值並選擇來源單位。
- 設定根 / 基準字型大小（預設 16px）。所有列即時更新。
- 按列複製，或一次複製全部結果。
- 若在 CSS 中巢狀
em，請再核對父元素的計算字號。
範例
| 輸入 / 設定 | 輸出 | 說明 |
|---|---|---|
16px, base 16 | 16.00px; 1.0000rem; 1.0000em; 12.00pt | 預設瀏覽器根字號 |
24px, base 16 | 24.00px; 1.5000rem; 1.5000em; 18.00pt | 常見標題 / 間距 |
1.5rem, base 16 | 24.00px; 1.5000rem; 1.5000em; 18.00pt | 相對單位 → 像素 |
12pt, base 16 | 16.00px; 1.0000rem; 1.0000em; 12.00pt | CSS 96dpi 邊界 |
實務上常見陷阱
- em 依賴父元素。 父級
1.25em內的1.2em不是1.2 × 根，會累乘。本表 em 假定元素字號等於基準。 - 若改了 root（如
html { font-size: 62.5% }），請把 base 改成真實根像素。 - 此處 pt 是 96dpi 下的 CSS 絕對單位，不是任意 DPI 的印刷點。
參考資料
最後審閱: 2026-07-27
常見問題
- 支援哪些 CSS 單位？
- px、rem、em、pt。% 與視口單位（vw/vh）不在範圍內。
- 根 / 基準字型大小是什麼？
- 用作 1rem（在本工具中也作 1em）的像素值。預設 16px，與多數瀏覽器的 `html` 預設一致；若設計系統不同請改掉。
- 這裡 rem 和 em 一樣嗎？
- 本工具用同一基準近似。真實 CSS 中 rem 相對根元素，em 乘以目前（常為父）元素的 font-size，巢狀會累乘。
- pt 如何換算？
- CSS 按 96dpi 時 1pt = 96/72 px（約 1.333px）。印刷 DPI 流程可能不同。