工具用的順手嗎？
你的回饋能幫助我們做得更好
為前端開發者與設計師設計的畫素與REM單位雙向換算工具，支援自定義根字型大小。
概覽
了解工具能解決的問題、計算或處理邏輯，以及資料邊界。
24px 在根字號為 16px 時對應 1.5rem；若同一專案的根字號改成 20px，它就對應 1.2rem。REM 不是一個固定數量的畫素，而是以根元素計算字號為參照的 CSS 長度單位。頁面接收 PX、REM 和基準畫素三個數值，可從任意一側開始換算。
REM = PX ÷ 根字號（px）PX = REM × 根字號（px）
“基準畫素”預設填 16，這是頁面預設值，不代表所有網頁都必須採用 16px。專案若顯式設定了根元素字號，應填寫該計算值；否則設計稿中的畫素標註和最終瀏覽器渲染可能不在同一基準上。
主換算框最多保留 4 位小數，並去掉末尾多餘的 0。比如輸入 48px、基準 18px，結果顯示 2.6667rem；把右側改成 2.5rem，左側會得到 45px。舍入隻影響頁面顯示，複製按鈕取得的是當前框中的數值。
| PX | 根字號 | 頁面顯示的 REM |
|---|---|---|
| 14px | 16px | 0.875 |
| 24px | 16px | 1.5 |
| 48px | 18px | 2.6667 |
下方常用值區列出 8、12、14、16、18、20、24、32、48、64px，並按當前基準重新換算。這個區域最多顯示 3 位小數；點選其中一項會把對應 PX 寫入主輸入框，因此它與上方 4 位小數的顯示精度可能不同。
指南
依步驟完成操作，並透過範例核對輸入與結果。
檢視專案根元素最終計算得到的 font-size，把畫素數填入“基準畫素”。沒有額外設定且只想按頁面預設換算時，可保留 16。
設計稿給出畫素值時填寫左側“畫素（px）”；已有 REM 值時直接填寫右側“REM”。另一側數值會隨輸入變化。
長小數會顯示到 4 位。若團隊的程式碼規範只允許 2 位或 3 位小數，應在寫入樣式前按專案規則再次舍入，並覈對由此產生的畫素差。
點選對應輸入框內的複製按鈕。複製內容只有數值，不會自動附加 px、rem 或完整 CSS 宣告。
情境
查看這項工具在不同工作與生活流程中的用法。
前端拿到 14px 正文、24px 標題和 32px 間距等標註後，可固定同一個根字號逐項換算，再把結果錄入專案的字號或間距令牌。常用值區適合快速覈對這些重複尺寸。
若測試環境把根字號從 16px 調到 18px，可修改基準並觀察同一 PX 標註對應的 REM 數值變化。結果用於數值換算，不會模擬媒體查詢、縮放設定或整個頁面佈局。
程式碼評審看到 1.125rem 時，可在右側輸入並按專案根字號反算畫素。根字號 16px 時結果是 18px，便於與設計稿標註對照。
問答
集中解答常見疑問與容易混淆的問題。
REM 固定參照根元素字號，而 EM 的參照會隨使用位置變化。這個頁面的目標單位是 REM，所以“基準畫素”應填寫根字號，不能拿某個父元素字號代替。
16px 只是頁面預設基準。根元素字號、使用者設定和樣式規則都可能改變實際參照值；只要基準不是 16，1rem 對應的 PX 就會隨之改變。
需要先補上單位或屬性。複製按鈕只複製諸如 1.5 的數字；寫成宣告時還需組合爲 font-size: 1.5rem; 等專案所需格式。
須知
使用前了解適用範圍、結果限制與必要提醒。
基準畫素應是非零正數。基準留空或填 0 時，頁面會按預設 16 計算；負基準或負長度雖可能產生數值，卻通常不適合作為字號，是否允許負長度還取決於具體 CSS 屬性。
頁面一次處理一組數值，不會掃描或批次改寫 CSS 檔案。PX 指 CSS 畫素而不是螢幕硬體畫素；REM 換算也不能單獨預測縮放、最小字號限制、繼承規則或最終佈局效果。落地前仍需在目標頁面和瀏覽器中檢查。
推薦
查找相關工具、專題與可用的 API 能力。
