PX 轉 REM 計算器 | 免費 CSS 單位換算與對照表

把設計稿 PX 快速換算爲 CSS REM,也可從 REM 反推 PX。支援自訂根字號、常用尺寸對照表和 Tailwind spacing 近似參考。

PX / REM 換算

rem = px / root font-size

px
常用根字號
px
rem

常用對照表

PXREMTailwind 近似
4px0.25remp-1
8px0.5remp-2
10px0.625rem-
12px0.75remp-3
14px0.875rem-
16px1remp-4
18px1.125rem-
20px1.25remp-5
24px1.5remp-6
32px2remp-8
40px2.5remp-10
48px3remp-12
64px4remp-16
80px5remp-20
96px6remp-24

如何使用

  1. 在「根字號」中確認項目的 html font-size,常見預設值爲 16px。
  2. 在 PX 輸入框鍵入設計稿尺寸,例如 24
  3. REM 輸入框會立即顯示 1.5rem;也可以反向輸入 2rem 推算爲 32px
  4. 查看下方對照表,快速核對常見字號、間距或 Tailwind spacing 對應值。

核心功能

  • 雙向即時換算:輸入 PX 或 REM 均可瞬間得到結果,無需點擊計算按鈕。
  • 自訂根字號:預設 Base Size 爲 16px,可根據項目配置改爲 10px、14px 或其他根字號。
  • 內置對照表:常用尺寸會隨根字號同步刷新,例如 12px、16px、24px、32px 對應的 REM 值。
  • Tailwind spacing 參考:顯示常見像素值對應的 Tailwind spacing token,方便把設計稿間距映射到實用類。
  • 純本機極速計算:所有換算都在瀏覽器記憶體中完成,不依賴網路請求。

相關工具

財富自由計算機 2026 (剔除通膨版) - 退休金與複利模擬器

2026 最新 FIRE 財務自由計算機(剔除通膨版)。拒絕虛高數字,精準模擬實際購買力下的複利增長。支援 4% 法則驗證與退休金缺口反向推算。支援一鍵匯出 CSV,完美適配 Excel 或 Notion 財務看板。隱私優先,本機計算零上傳。

倉位計算機 - 按風險比例規劃交易倉位

根據帳戶資金、風險比例、進場價和停損價計算交易倉位。所有計算在瀏覽器本機完成,不上傳帳戶資料,可對比多檔風險方案。

複利計算機 | 免費定期定額收益與 APY 增長圖表

輸入本金、定期投入、年化報酬率和投資年限,計算複利增長結果,並用互動式圖表展示本金、利息和最終總額。資料僅在本機計算。

線上房貸/貸款計算機 - 即時圖表與還款明細(本息平均攤還/本金平均攤還)

使用 Loan Calculator/Mortgage Calculator 在瀏覽器本機計算每月還款額、總利息與還款明細。輸入貸款金額、年利率和期限,立即查看圖表與還款計畫表。

線上投資與 ROI 計算機 - 定期定額/複利收益視覺化

使用 Investment Calculator/ROI Calculator 在瀏覽器本機估算初始本金、每月定期定額、年化報酬率和通膨後的投資結果。立即查看複利圖表、本金/收益拆解、ROI 與年度明細。

APR 與 APY 換算計算機 - 名目利率與實質利率轉換

使用 APR to APY Calculator 在瀏覽器本機完成 APR/APY 雙向換算。輸入利率並選擇複利頻率,立即查看有效年利率、差值和多頻率比較表。

利潤率計算機 - 毛利率、加成率與售價線上換算

使用這款利潤率計算機在瀏覽器本機計算毛利、Margin 和 Markup。輸入成本和售價,或輸入成本與目標毛利率,立即推算售價並避免把加成率誤當利潤率。

CPM 與 CPC 計算機 - 廣告投放 CTR 與成本線上試算

使用 CPM 與 CPC 計算機在瀏覽器本機試算廣告花費、曝光數、點擊數、CPM、CPC 和 CTR。輸入預算與目標成本,快速推演可獲得的曝光或點擊。

計算邏輯

  • PX 轉 REM 公式:REM = PX / Base Size
  • REM 轉 PX 公式:PX = REM × Base Size
  • 預設情況下瀏覽器根字號通常爲 16px,因此 16px = 1rem24px = 1.5rem

常見問題

1rem 等於多少 px?

預設瀏覽器設定下,1rem 通常等於 16px。但如果項目修改了 html { font-size },就應以實際根字號為準。

PX 和 REM 有什麼區別?

PX 是固定像素單位;REM 相對於根元素字號,更適合響應使用者字號偏好與可訪問性設定。

爲什麼很多項目用 10px 作爲根字號?

部分項目會設定 html { font-size: 62.5%; },讓 1rem 約等於 10px,便於心算。但要注意使用者字號設定和可訪問性影響。

支援 EM 換算嗎?

當前工具聚焦 PX 與 REM 的雙向換算。EM 取決於當前元素自身字號,不一定等於根字號,因此暫不寫入計算承諾。

這個工具會上傳 CSS 或設計資料嗎?

不會。換算只發生在瀏覽器本機,沒有檔案上傳或伺服器計算。