什么是排版单位换算器？
排版单位换算工具可在像素（px）、em、rem、磅（pt）、百分比（%）和视口单位（vw、vh）之间互相转换。设好基准字号和视口尺寸，在任意字段输入数值，其余单位立刻同步更新。
换算遵循 CSS 标准:1pt = 96/72 px,em 和 rem 是基础字号的倍数,百分比把基础字号视作 100%,vw 和 vh 是视口宽高的比例。在任意一个输入框里改数字,其它六个字段会实时联动。基础字号默认 16px(常见的根值),也可以改成 14、18 或设计系统约定的任何值,视口默认 1920×1080,让 vw 和 vh 保持准确。
使用方法
- 第一步 — 设置基准字号（默认 16px），该值决定 em、rem 和百分比等相对单位的计算基准。
- 第二步 — 在七个单位字段（px、em、rem、pt、%、vw 或 vh）中任意一个输入数值，其他单位的值会即时更新。
- 第三步 — 复制任意转换后的数值，用于 CSS 样式表、设计规范或印刷排版。
何时使用
- 把印刷设计师给的 pt 规格,转成样式表真正应用的 px 数值。
- 审计设计系统,看看 1.25rem 的标题在选定 root 下是不是真的等于预期的 20px。
- 在已经改了继承字号的父级里,挑选合适的 em 或 % 数值。
结果
设计师给出的规范使用磅值（14pt 正文）。在 pt 字段输入 14 并将基准设为 16px，即可看到对应值为 18.67px、1.167em、1.167rem 和 116.7%，可直接用于样式表。
常见问题
- 为什么 1pt 转出来是 1.333px,不是 1px?
- CSS 定义 1pt 等于 1/72 英寸,1in 等于 96px,所以 1pt = 96/72 = 1.333px。所有浏览器都用这个换算。pt 在屏幕上看起来比数字大,就是因为这 4/3 的系数。
- em 和 rem 有什么区别?
- rem 始终参照根字号(<html> 元素),em 参照最近父元素的字号。所以 2em 放在 20px 的父元素里是 40px,但 2rem 总是 2 × root,跟嵌套在哪个父元素无关。
- 基础字号设置怎么影响换算结果?
- 它决定 1rem 和 1em 对应多少 px。默认 16px 跟大多数浏览器一致,所以 1rem = 16px。如果你的 root 是 18px,1rem = 18px,1.25rem 的标题就变成 22.5px,而不是 20px。pt 不受影响,因为它是绝对单位。
- 样式表里应该用 px、rem 还是 em?
- 字号用 rem(用户改浏览器缩放或无障碍设置时能跟着变),边框和细微间距用 px(需要精确),按钮内边距这种跟着当前元素字号走的间距用 em。
- 为什么 px 等于基础字号时,百分比不是 100%?
- 其实就是 100%。如果 px 等于你的 base(比如 16,base 也是 16),百分比那栏会显示 100。如果显示不是 100,要么 px 跟 base 不完全相等(可能是其它字段四舍五入),要么是你输入 px 之后又改了 base。