PX 轉 REM 換算

功能簡介

這個工具在像素和相對單位 rem、em 之間換算 CSS 長度。輸入單一數值（如 24px）得到 1.5rem；每行一個值可一次換算多個；貼上整段樣式表，其中所有 px 值都會被原地改寫。對照表列出目前基準字級下 1px 到 128px 的常用尺寸。所有內容都只在瀏覽器中處理。

使用方法

1. 貼上 CSS，或每行輸入一個數值。不帶單位的數字視為 px（反向換算時視為 rem/em），寫了另一種單位的值會自動反向換算。
2. 設定「基準字級」。所有瀏覽器的預設值都是 16px；有些專案會寫 html { font-size: 62.5% }，讓 1rem = 10px。
3. 選擇「方向」（px → rem 或 rem → px）、「單位」（rem 或 em）以及保留幾位「小數位數」。
4. 需要時設定「小於此值保留 px」，讓 1px 邊框等細線維持 px。
5. 按結果上方的按鈕複製。

範例

/* before */
.title { font-size: 24px; margin-bottom: 12px; }

/* after (base 16px) */
.title { font-size: 1.5rem; margin-bottom: 0.75rem; }

不是 px 的值，例如百分比、顏色、url() 裡的檔名和 .mt-16px 這類 class 名稱，都不會被更動。0px 會寫成 0。

px、rem 和 em

• px 是絕對單位，不理會讀者設定的偏好字級。
• rem（root em）是 html 元素字級的倍數。讀者把瀏覽器字級設為 20px 時，1rem 就是 20px，整個版面隨之縮放。
• em 是目前元素字級的倍數。適合需要跟隨所屬文字大小的間距，但巢狀的 em 會相乘，所以預設用 rem 比較穩妥。

媒體查詢也會轉換：@media (min-width: 768px) 變成 48rem（或 48em），讀者放大文字時斷點仍然一致。注意在媒體查詢中，rem 和 em 都以瀏覽器預設字級為準，而不是你在 html 上設定的字級。