CSS 單位換算

工具介紹

寫響應式樣式時最常卡在單位互轉：設計稿給 pt，開發用 rem，視口適配又要換成 vw，心算容易把根字號和父字號搞混。這個頁面只做一件事，把任意來源單位先折成 px，再一次性給出六種單位的等值寫法。

示例填 2 rem、根字號 16 px、視口 1440×900、父元素字號 16 px。折成 32 px 後，rem 仍是 2，em 是 2，pt 是 24，vw 是 2.2222，vh 是 3.5556。把父元素字號改成 20 px，來源數值不變時 px 與 em 會一起變，rem 因為只認根字號而保持不變。

百分比在下拉里按"相對父字號"處理，和 CSS 裡 width:50% 相對包含塊的語義不同，用之前先確認你要的是哪一種。

功能特點

• 六種結果：px、rem、em、pt、vw、vh 一次全給，不用逐個切。
• 根字號：rem 與 em 依賴你填的根字號，預設按 16 px。
• 百分比口徑：按百分之幾折算，100% 等於 1 倍父字號。
• 視口單位：vw 與 vh 按視口尺寸算，和父元素無關。
• pt 換算：pt 按 96 dpi 折成 px，印刷稿另有口徑。
• 負數保留：數值允許為負，換算只改尺度不改符號。

使用方式

1. 數值：填待換算的數，允許負數，符號會原樣帶到六種結果裡。
2. 來源單位：選它現在用的單位——pt、rem、em、vw 等，這一步選錯後面全跟着錯。
3. 根字號：填 html 根的 font-size，預設 16 px；rem 只認這個數，不認父元素字號。
4. 視口寬度、視口高度：按正在適配的螢幕填，vw 與 vh 由它們決定；父元素字號隻影響 em 和百分比。
5. 讀六格：點計算後 px、rem、em、pt、vw、vh 一次給齊；改父元素字號時 rem 保持不動，可以拿這一點驗算。

注意事項

• 根字號：rem 與 em 依賴填入的根字號，預設 16 px
• 百分比：按百分之幾折算，100% 等於 1 倍父字號
• vw vh：按視口尺寸折算，與父元素無關
• pt：pt 按 96 dpi 與 px 換算，印刷另有口徑
• 負數：數值允許負數，換算只改尺度不改符號