免費畫素與 REM 轉換器

工作原理

所有換算都在你的瀏覽器中使用零依賴的手寫算術引擎執行。工具在七種 CSS 單位（px、rem、em、pt、vw、vh 和 %）之間換算，所有計算都以畫素為統一基準，根據你設定的根字型大小、父元素字型大小或視口尺寸進行簡單的除法或乘法。

1. 1
   設定上下文數值

   換算之前，你需要設定讓相對 CSS 單位有意義的四個數值：根字型大小（預設 16px，即瀏覽器預設值）、父元素字型大小（用於 em 和 % 換算）以及視口寬度和高度（用於 vw 和 vh）。這些與瀏覽器在執行時解析 CSS 所用的值相同。
2. 2
   以畫素作為通用中間值

   換算器先呼叫 toPixels() 將輸入規範化為原始畫素數——例如 1.5rem 變為 1.5 × baseFontPx，50vw 變為 0.5 × vpWidth。然後 fromPixels() 將該畫素數除以目標單位的相應係數。換算表中同時顯示全部七種單位。
3. 3
   查詢最接近的 Tailwind 值

   換算後，工具計算 rem 值並掃描兩個硬編碼的查詢表——Tailwind 的十三個字型大小值（text-xs 到 text-9xl）及其間距刻度——按絕對差找到最接近的符合。= 號表示該值與某個值完全一致；≈ 表示最接近的近似值。
4. 4
   透過正則批次改寫 CSS

   貼上 CSS 面板接受原始 CSS 文字並應用正則替換：在 px→rem 模式中，符合每個 px 值，並將數字部分替換為 value/baseFontPx + rem；rem→px 模式則反向進行。會顯示替換次數，方便你核實改寫了多少個值。

相關工具