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 换算，印刷另有口径
• 负数：数值允许负数，换算只改尺度不改符号