PX 轉 REM 的批次轉換是指反覆以一個已確認的根字型大小,將 CSS 像素值進行轉換,其中 rem = 像素 ÷ 根像素。 精簡的 PX 轉 REM 轉換器 支援此工作流程,每次轉換只能處理一個嚴格的數值,而不是貼上包含多個數值的清單。這項差異對搜尋「px to rem bulk」的人而言很重要:保持根設定不變、逐一轉換每個項目,並收集可直接複製的結果,而不是假設以逗號分隔的輸入能正常運作。請輸入文件根元素的實際運算字型大小;欄位以 16 px 起始僅為方便,只有當它與文件相符時,16 才是正確值。對一般宣告,請將像素值除以根大小。若要反向轉換,則將 rem 乘以根大小。出現近似值標記時請加以檢查,然後一起複製顯示的數字與單位。所有算術運算都在目前的瀏覽器分頁中執行,轉換器不會檢查或編輯您的網站。

PX 轉 REM 批次轉換實際需要什麼
「批次」通常表示貼上的清單,但這個專注的轉換器每次執行只能接受一個數值。逗號、單位後綴及混合文字都會被拒絕,因此可靠的方法是將來源清單保留在工具之外,依序處理各個項目。這能建立可重複的批次工作流程,而不必把單值欄位當成清單解析器。
- 在整次執行期間保持轉換方向一致。
- 每個相關項目都使用相同的已確認根大小。
- 在您自己的清單中,將每個結果記錄在其來源值旁邊。
- 套用輸出前,請檢查錯誤與近似值標記。
- 如果文件根元素變更,請重新執行轉換。
轉換前先確認文件根元素
CSS 將 rem 定義為相對於根元素的字型大小。W3C CSS Values and Units Level 4 對 rem 的定義與MDN 的根元素相對長度參考資料說明了這項關係。一般轉換時,請將像素除以根像素。轉換器的根欄位以 16 px 起始,因為這是常見的瀏覽器預設值,但這只是方便設定,並不保證適用。
瀏覽器偏好、使用者樣式、無障礙設定、作者 CSS、嵌入文件及應用程式設計系統,都可能建立不同的運算根大小。當數值不確定時,請使用瀏覽器開發者工具檢查文件根元素。當 rem 出現在根元素自身的 font-size 宣告中時,CSS 另有一項特殊規則:它指的是該屬性的初始值,而不是遞迴參照自身。這個轉換器不會預測該特殊宣告情境。
在一般根元素已確立的情況下,24 px 的值以 16 px 為根時,會得到 24 ÷ 16 = 1.5,產生 1.5rem 的 CSS 結果。根元素變更時,rem 與像素之間的關係也會改變,因此先前產生的 rem 值不應預期在不同根元素下仍維持相同的像素結果。
以固定根元素轉換多個值
請對 PX 或 REM 清單中的每個項目使用以下順序:
- 選擇方向。 來源值為像素時,選擇 PX 轉 REM;來源值為 rem 單位時,選擇 REM 轉 PX。
- 輸入一個原始數字。 提交數值前,請移除 CSS 單位。貼上的項目若為數字後面接單位後綴,便無效,因為此欄位只接受數值文字。
- 設定已確認的根元素。 請輸入文件實際運算出的根字型大小(以像素表示)。處理相關數值時,請保持此欄位不變,讓每個結果都使用相同的轉換係數。
- 執行轉換。 確認結果有效,並檢查任何近似值標記。出現錯誤時,不應將顯示的輸出複製到批次記錄中。
- 複製目前的輸出。 「複製」會一起複製顯示的數字與輸出單位。如果剪貼簿存取遭拒或無法使用,有效結果仍會顯示,以便手動複製。
- 移至下一個來源項目。 重複此程序,並在外部記錄結果。編輯數值、根元素或方向,或開始另一次轉換,都會清除先前的複製狀態。
確保每個批次項目都符合輸入規則
轉換器採用完整的十進位與科學記號語法,而不是試圖解讀混合的 CSS 輸入。這能明確指出無效的批次資料,而不會悄悄改變其含意。
| 輸入形式 | 範例 | 處理方式 |
|---|---|---|
| 整數或小數 | 12, 1.25 | 接受 |
| 前置小數點 | .5 | 接受 |
| 帶正負號的值 | -8 | 可接受進行單位算術運算 |
| 科學記號 | 2e2, 1e-3 | 在為有限值且位於支援範圍內時接受 |
| 前置或後置空白 | 數字周圍的空格 | 無害 |
| 內部空白 | 分隔的數字群組 | 不會悄悄移除 |
| 不支援的語法 | 十六進位、逗號、單位後綴、Infinity、NaN、不完整指數、混合文字 | 拒絕 |
每個原始欄位在修剪前後都會檢查是否超過 100 個 UTF-16 程式碼單位。超過上限的文字會明確失敗,絕不會遭截斷。主要轉換值必須是有限值,且位於 −1,000,000,000 至 1,000,000,000 的含首尾範圍內。根元素必須介於 1 至 1,000 px(含首尾)之間。邊界值會被接受,而超出這些範圍的值會產生明確錯誤,不會被限制上限。結果必須保持為有限值,且位於 ±1,000,000,000,000 之內,因此 1,000,000,000,000 px 是支援的最大反向轉換結果。在瀏覽器數值精確度下變為零的非零科學記號文字會被拒絕,PX 轉 REM 的非零結果若發生下溢,也會被拒絕。精確的負零會正規化為一般的零。
正確解讀捨入與複製狀態
瀏覽器計算採用二進位浮點算術,因此某些小數商值無法以無限多個精確數位表示。輸出最多會格式化為 12 個有效數位,裝飾用的尾端零會移除;當科學記號能清楚傳達非常小或非常大的值時,則會保留。當顯示文字與數值的標準最短小數形式不同時,便會出現近似值標記,介面也會指出結果已捨入至 12 個有效數位。精確顯示的值不會標示為近似值。
近似值標記是精確度的揭露,並不表示可以把輸出視為具有無限精確度的設計量測值。「複製」會一起複製顯示的數字與單位。剪貼簿存取仍取決於瀏覽器權限與安全內容規則;複製失敗不會移除結果,而是提示您手動複製。每次複製尝試都與目前的輸入內容綁定,因此延遲的剪貼簿回應無法覆蓋較新轉換的狀態。
讓單位符合樣式設計目標
轉換應支援明確的 CSS 策略,而不是機械式地取代每一個像素。
| 設計需求 | 適合的單位 | 原因 |
|---|---|---|
| 與根比例相連的排版 | rem | 對一般宣告追蹤根元素相對的尺寸設定 |
| 與根元素基礎字型比例相連的間距 | rem | 隨文件的根尺寸情境調整 |
| 刻意固定的 CSS 參考像素值 | px | 保留原始碼所設定的參考像素意圖 |
| 具有自身長度限制的屬性 | 另行驗證 | 單位算術無法決定屬性是否合法 |
當根元素相對縮放有助於排版或間距系統時,請使用 rem;對於刻意採用固定 CSS 參考像素值之處,則保留 px。CSS px 是版面系統使用的參考像素,並不保證是顯示器上的實際物理量測值。轉換器不會考量頁面縮放比例,也不承諾任何特定的實際顯示尺寸。請在使用者可能採用的根大小與瀏覽器設定下測試重要版面。
將轉換與網站分析分開
這個工具會依您提供的根大小執行單位算術運算。它不會評估樣式表、解析層疊或繼承、檢查瀏覽器偏好、檢視應用程式設計系統,也不會修改您的程式碼。它同樣不會計算 em 或視窗單位,也無法判定特定 CSS 屬性是否接受帶正負號的結果。
解析、算術、格式化及複製都在目前的瀏覽器分頁中於本機進行。沒有任何輸入值、根大小、結果或剪貼簿內容會被上傳,這個工具也不使用任何 API 或套件相依性。若要進行可靠的批次作業,請將方向與根大小和結果一起記錄、根元素變更時重新開始處理、解決每個輸入錯誤,並在目標版面中測試產生的 CSS。