跳至主要內容
Lizely

PX 到 REM 轉換器

將 CSS 長度在像素與 rem 單位之間轉換，支援自訂根字型大小，並提供可複製的輸出結果。

隱私權：你的檔案不會離開裝置，所有處理均在瀏覽器本機完成。

使用方式

  1. 1.選擇 PX 轉 REM 或 REM 轉 PX，然後輸入嚴格的十進位制數值或科學記號數值。
  2. 2.輸入實際計算出的根字型大小（以像素為單位）；僅在與你的文件相符時保留 16。
  3. 3.轉換、檢視是否有近似標記，並在需要時複製顯示的 CSS 值。

關於PX 到 REM 轉換器

PX到REM轉換器在你的瀏覽器中執行專注的雙向CSS長度計算。選擇PX到REM或REM到PX，輸入一個值，設定根字型大小的像素，並產生可複製的CSS值。這個工具預設在根欄位中使用16 px，因為這是瀏覽器常見的預設值，但16 px並無保證。瀏覽器偏好、使用者樣式、作者CSS、輔助功能設定、嵌入文件以及應用設計系統都可能建立不同的計算根字型大小。為準確工作，請檢查文件根部實際計算出的字型大小並輸入該值。CSS rem單位是相對於根元素的字型大小來定義的。對於普通轉換，像素轉REM使用rem = 像素 / 根像素。反向方向則使用像素 = rem × 根像素。一個16 px值在16 px根下會轉換為1 rem；24 px是1.5 rem；而1.25 rem會返回20 px。改變根為20 px會改變這些關係。轉換器假設設計在一個根大小下匯出的結果，在另一個根大小下不會保留相同的像素結果。 CSS 有特殊規則，當 rem 出現在根元素自身 font-size 宣告中時：它會參考屬性初始值，而不是遞迴參考自身。這個緊湊的轉換器用來將值轉換為已知計算根大小。它不會評估樣式表、解析層疊或繼承、檢查瀏覽器偏好，或預測特殊宣告上下文。當根大小不確定時，請使用瀏覽器開發者工具。值使用嚴格的十進位制語法。整數、十進位制小數、前導小數如 .5、帶符號值以及科學記數法如 2e2 或 1e-3 是支援的。十六進位語法、逗號、輸入中的 CSS 單位字尾、Infinity、NaN、部分指數以及混雜文字會被拒絕。前導和尾隨空白字元無害，但內部空白字元不會被靜默移除。每個原始欄位在修剪前會檢查 100 UTF-16 的碼元預算；超出限制的文字會明確失敗且不會被截斷。負值允許使用，因為許多 CSS 屬性和計算可以使用帶符號長度，雖然個別 CSS 屬性可能會有自己的非負規則。 此工具只執行單位算術，不會驗證計算結果是否適用於每一個 CSS 屬性。主要數值的範圍包含 -1,000,000,000 到 1,000,000,000 兩端，根字型大小的範圍則包含 1 到 1,000 px 兩端。這些明確且有限的界線可排除意外輸入的巨大指數與零除數。邊界值可接受，超出範圍的值則會產生清楚的錯誤。非零科學記號若小到超出瀏覽器數值精度，系統會拒絕，而不會將其變成零；這也包括解析後發生下溢的 PX-to-REM 除法。精確的負零會正規化為一般的零。任何值都不會遭到箝制、縮短或在未告知的情況下設限。支援的反向換算結果最大可達 1,000,000,000,000 px。JavaScript 數值採用二進位浮點運算，因此部分十進位商數無法以無限多位數精確表示。輸出最多格式化為 12 位有效數字，會移除僅供排版的尾端零，並在能清楚表達極小或極大值時保留科學記號。 當顯示的數值與該數字的標準最簡短十進位制形式不同時，介面會顯示一個近似標記，並明確指出已四捨五入至 12 有效數位。精確顯示的數值，例如 0.0625，則不會標註為近似值，而被修改過的次規範或重複值則會標註。這避免了將長長的二進位浮點數尾端呈現為有意義的設計精度，同時保留了遠超過一般 CSS 佈局工作所需的精確度。複製會將顯示的數值與輸出單位一同複製至剪貼簿，例如 1.5rem 或 24px。剪貼簿存取取決於瀏覽器的權限與安全情境規則。複製失敗不會毀掉有效的結果；會顯示手動複製的訊息。編輯值、編輯根大小、改變方向或執行另一個轉換會立即清除任何先前的複製狀態。每次複製嘗試都會收到一個產生令牌，因此較舊的剪貼簿請求若在輸入改變後才成功或失敗，將無法覆蓋目前的狀態。解除安裝工具會使待處理的剪貼簿工作無效。所有解析、運算、格式化與複製動作都在當前瀏覽器分頁中進行。 未輸入值、根字型大小、結果或剪貼簿內容將不會上傳至 Lizely。此工具不新增套件依賴，也不會呼叫 API。它不會修改你的樣式表、檢查你的網站、計算 em 單位、轉換視窗單位、計算頁面縮放比例，或保證特定的實際物理大小。CSS 和 px 是佈局系統使用的參考像素單位；rem 是相對於根字型大小的單位。這兩者都不應被視為螢幕上的保證物理測量值。當你的字型或間距系統需要根相對縮放時，使用 rem；而在有意圖使用固定 px 參考像素值的地方，則保留 CSS。在實際根字型大小和瀏覽器設定下測試重要的佈局，以符合你的使用者可能使用的設定。

方法與來源

請在去除前拒絕上述 100 UTF-16 編碼單位，然後匹配完整的十進位制/科學記號語法後再進行數值轉換。拒絕會下溢至零的非零十進位制文字。值必須為有限數值且在 ±1,000,000,000 之間；根字型大小必須為有限數值且在 1 到 ZX或其他 1,000 px 之間。PX 轉 REM 是將值除以根 PX；REM 轉 PX 是將值乘以根 PX，且任何會下溢至零的非零結果皆被拒絕。結果必須保持有限且在 ±1,000,000,000,000 之間。負零會被規範為零。顯示使用 12 個有效數字，去除末尾零以及多餘的指數格式，並在該文字與數值的標準最短十進製表示不一致時標記為近似值。輸入編輯、根編輯、方向改變以及新的轉換會清除先前的輸出錯誤與剪貼簿狀態。剪貼簿版本加上已掛載的防護措施可防止延遲的非同步複製完成導致釋出過時狀態。沒有輸入會被限制或上傳。

常見問題

什麼公式可以將像素轉為 rem？
將像素值除以根元素實際計算的字型大小（以像素為單位）。例如，24 px 除以一個 16 px 的根值，結果為 1.5 rem。
根字型大小總是 16 px 嗎？
不。十六像素是常見的預設值，僅為初始的便利設定。瀏覽器偏好設定、使用者樣式、可及性設定以及網站的 CSS 都可能導致實際計算的根大小不同。
為何結果有時會顯示近似標記？
某些小數結果無法以二進位浮點精確表示。該工具最多顯示 12 個有效數字，並在顯示結果為四捨五入時標記為近似。
我可以輸入負值或科學記號嗎？
可以。支援有符號的十進位值以及如 2e2 或 1e-3 之類的科學記號。不過，負長度是否有效仍取決於你使用該長度的 CSS 屬性。

相關工具

開發者工具 使用指南

查看全部