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

px to rem bulk
PX 轉 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 清單中的每個項目使用以下順序:

  1. 選擇方向。 來源值為像素時,選擇 PX 轉 REM;來源值為 rem 單位時,選擇 REM 轉 PX。
  2. 輸入一個原始數字。 提交數值前,請移除 CSS 單位。貼上的項目若為數字後面接單位後綴,便無效,因為此欄位只接受數值文字。
  3. 設定已確認的根元素。 請輸入文件實際運算出的根字型大小(以像素表示)。處理相關數值時,請保持此欄位不變,讓每個結果都使用相同的轉換係數。
  4. 執行轉換。 確認結果有效,並檢查任何近似值標記。出現錯誤時,不應將顯示的輸出複製到批次記錄中。
  5. 複製目前的輸出。 「複製」會一起複製顯示的數字與輸出單位。如果剪貼簿存取遭拒或無法使用,有效結果仍會顯示,以便手動複製。
  6. 移至下一個來源項目。 重複此程序,並在外部記錄結果。編輯數值、根元素或方向,或開始另一次轉換,都會清除先前的複製狀態。

確保每個批次項目都符合輸入規則

轉換器採用完整的十進位與科學記號語法,而不是試圖解讀混合的 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。

相關閱讀:JavaScript 正規表示式速查表批次工作流程。

相關閱讀:線上 UUID v4 產生器:批次產生 RFC 4122 ID。