若要將像素轉換為 rem，請將像素值除以文件根元素的計算字型大小（以像素為單位）：rem = px ÷ rootPx。 若要進行反向轉換，請使用 px = rem × rootPx。

rem 單位相對於根元素的字型大小；CSS px 則是版面配置系統所使用的參考像素。只有在 rootPx 與正在編輯的文件相符時，這個公式才準確。雖然 16 px 是常見的根大小，但並不保證適用。瀏覽器偏好設定、使用者樣式、無障礙設定、作者 CSS、內嵌文件及應用程式設計系統，都可能建立不同的計算值。

本速查表將公式、根大小檢查及輸入界限集中於一處。如需直接計算，PX to REM 轉換器可依任一方向一次處理一個值。

px to rem cheat sheet
PX to REM 速查表：公式、根大小、範例

轉換公式概覽

代入數字前，請先確認轉換方向。根值是計算時使用的參考值，而不是轉換器從您的樣式表中偵測到的值。

工作 公式 必要的參考值
像素轉 rem rem = pixels ÷ rootPx 像素值及根元素的計算字型大小（以像素為單位）
rem 轉像素 px = rem × rootPx rem 值及根元素的計算字型大小（以像素為單位）

W3C CSS Values and Units Level 4 規格將 rem 定義為相對於根元素的字型大小，而MDN 相對長度參考資料則提供相同的單位背景說明。這些參考資料會解釋標準行為，但不會顯示特定頁面中的計算根大小。

請勿假設以某個根大小匯出的設計，在另一個根大小下仍會產生相同的像素結果。這種關係會隨根元素而變動。CSS px 與 rem 都是版面配置單位，而非保證對應實體量測值；瀏覽器縮放也與根元素相對縮放分開處理。

使用 PX to REM 轉換器轉換數值

  1. 開啟連結的 PX to REM 轉換器，並選擇 PX to REM 或 REM to PX。
  2. 在欄位中輸入來源值，該值必須是嚴格的十進位或科學記號數字，且不可在欄位內包含 px 或 rem 等單位後綴。
  3. 輸入實際的計算根字型大小（以像素為單位）。只有初始值 16 px 與文件相符時，才保留此值。
  4. 選取 Convert 以產生 CSS 值。
  5. 檢查結果及任何近似值標記，並於需要時複製顯示的數字與單位。

Copy 會將顯示的數字與輸出單位一起複製到剪貼簿。存取權取決於瀏覽器權限與安全內容規則。若複製失敗，有效結果仍會保留，介面也會要求您手動複製。編輯數值、根大小或方向時，會清除先前的錯誤與複製狀態；較早的剪貼簿要求無法覆寫較新輸入項目的狀態。

解析、算術、格式化及複製作業都在目前的瀏覽器分頁中執行。輸入的數值、根大小、結果及剪貼簿內容不會上傳，工具也不會呼叫 API 或修改您的樣式表。

轉換範例

假設您已確認文件根元素的計算值為 16 px，並需要轉換 24 px 的長度。

公式：rem = px ÷ rootPx。 代入：rem = 24 px ÷ 16 px。 結果：1.5rem。

此結果適用於已確認的 16 px 根元素。如果文件的實際根元素不同，請輸入該值並再次轉換，不要假設相同的 rem 值會產生相同的像素結果。

轉換前先找出根大小

  1. 開啟您打算變更其 CSS 的頁面或文件。
  2. 開啟瀏覽器的開發者工具，並檢查文件根元素，通常是 html 元素。
  3. 在 Computed styles 面板中尋找 font-size，並確認其值（以像素為單位）。
  4. 若為內嵌內容或應用程式外殼，請檢查擁有相關 CSS 之文件的根元素，不要假設它與外層頁面相符。
  5. 在轉換器的根欄位中輸入該計算像素值。

轉換器為方便起見，會以 16 px 作為初始值，因為這是常見的瀏覽器預設值，但並不保證適用。當數值不確定時，開發者工具才是可靠的來源。工具本身不會檢查瀏覽器偏好設定、評估樣式表、解析層疊順序或追蹤繼承關係。

輸入規則與數值限制

  • 接受的數字：支援整數、小數、像 .5 這類前置小數點、帶正負號的值，以及像 2e2 或 1e-3 這類科學記號。
  • 拒絕的語法：十六進位數字、逗號、輸入內容中的 CSS 單位後綴、Infinity、NaN、不完整的指數及混合文字，都會產生錯誤，而不會以寬鬆方式解讀。
  • 空白字元：開頭與結尾的空白字元不會造成問題，但內部空白字元不會在未告知的情況下移除。
  • 欄位長度：每個原始欄位的長度上限為 100 個 UTF-16 程式碼單元，並會在修剪前進行檢查。超過上限的文字會明確失敗，絕不會遭到截斷。
  • 輸入範圍：主要數值範圍包含 −1,000,000,000 至 1,000,000,000。根字型大小範圍包含 1 至 1,000 px。每個輸入值也必須是有限值。
  • 負值：轉換器允許帶正負號的長度，因為許多 CSS 屬性及計算都可以使用它們。特定 CSS 屬性仍可能要求非負值。
  • 精確度界限：非零數值若因瀏覽器數值精確度而下溢為零，就會遭到拒絕。精確的負零會正規化為一般零。

結果必須保持為有限值，且位於 −1,000,000,000,000 至 1,000,000,000,000 之間，因此支援的最大反向結果為 1,000,000,000,000 px。超出範圍的輸入或無效結果會產生明確錯誤；不會有任何數值遭到限制、縮短或默默設上限。

讀取精確與近似結果

轉換器使用瀏覽器的浮點算術，因此部分小數商值無法以無限多個精確數字表示。輸出會格式化為最多 12 個有效位數，裝飾用的尾隨零會移除；當科學記號能清楚傳達極小或極大數值時，則會保留。

當顯示文字與數值的標準最短小數形式不同時，介面會顯示近似值標記，並指出結果已四捨五入至 12 個有效位數。精確的顯示值不會標示為近似值。此標記說明的是顯示精確度，並不表示轉換遭到拒絕。

轉換後，請再次檢查根大小及目標屬性。工具會執行單位運算，但不會判定產生的長度是否適用於每個 CSS 屬性。

選擇 rem 或保留 px

當文字排版或間距應隨文件根元素縮放時，請使用 rem。當刻意採用固定的 CSS 參考像素值時，請保留 px。兩種單位皆不代表螢幕上保證的實體量測值。

單位 最適用情況 主要依存關係 主要注意事項
rem 根元素相對的文字排版與間距 根元素的計算字型大小 根大小改變時，其像素結果也會改變
px 刻意採用的固定 CSS 參考像素值 版面配置系統的像素參考 不會隨根字型大小的變動而調整

請在使用者可能採用的根大小及瀏覽器設定下，測試重要的版面配置。根元素相對的設計在不同環境中可能會以不同方式縮放，而固定值則不會隨根設定調整。頁面縮放與實體螢幕大小仍是分開的考量因素，轉換器並未將其納入考量。

轉換器無法處理的特殊情況

當 rem 出現在根元素自身的 font-size 宣告中時，CSS 有一套特殊規則：它會參照該屬性的初始值，而不是遞迴參照自身。轉換器會依您輸入的根大小執行一般算術，也不會預測這種特殊的宣告情境。請另行處理此情況，並在開發者工具中加以驗證。

這個單一值轉換器不會評估樣式表、解析層疊順序或繼承關係、檢查瀏覽器偏好設定、計算 em 或視窗單位、考量頁面縮放、預測算繪後的實體大小，也不會變更專案檔案。它每次轉換一個值，而非處理整份批次樣式表。若要進行大規模遷移，根元素感知 PX to REM 批次轉換工作流程會涵蓋該項獨立工作。

進行正式環境工作時，請檢查實際根大小、依該參考值進行轉換、檢查精確度標記，並在與您受眾相關的設定下測試產生的版面配置。