🔄 CSS Unit Converter (px / em / rem / pt / %)

Convert between CSS length units.

📐 工作原理與說明

在 px、em、rem 等 CSS 長度單位之間換算，相對單位依賴基準字號。

基準字號（px）

PX 值

即時預覽（當前 px 值）：

示例文字

📚 深度解析：CSS 單位換算（px / em / rem / pt / %）

換算

根字號 16px：2rem=32px；父字號 14px：1.5em=21px；12pt≈16px。

em 與 rem 區別？: em 相對父元素字號，rem 相對根(html)字號。
em 和 rem 有什麼坑？: rem 恆等於根元素字號，可預測；em 相對父元素字號，巢狀多層會逐級相乘——三層巢狀且每層 1.2em 時，實際是 1.728 倍而非 1.6 倍。因此字號建議統一用 rem，只有需要跟隨區域性上下文縮放的屬性（如按鈕內邊距）才用 em。

📊 結果解讀

CSS 長度：px 絕對畫素；em 相對父字型大小；rem 相對根（html）字型大小；pt 印刷點（1pt=1/72in）；% 相對父尺寸。無父上下文時 % 可能無效。

響應式排版優先用 rem/em 實現可縮放；px 適合固定邊框。1rem 預設 = 16px。

em 會層層累積，巢狀深時需謹慎；結果以當前根/父字型設定為準。