CSS 尺寸单位换算

功能

• 一次给出 11 种单位：px、rem、em、vw、vh、vmin、vmax、pt、in、cm、mm
• 相对单位的参照物可调：根字号、当前字号、视口宽高
• 每个相对单位的行内旁注写明「按什么算的」，避免把假设当成事实
• 输入可带单位（24px、1.5rem）也可不带，不带时按下拉框选的那个单位理解
• 全角数字、全角符号、粘贴带引号都能认（输入法带来的，不是你的输入错误）
• 结果分两组（相对单位 / 绝对单位），每行可单独复制
• 实时计算，不需要点运行；输入框空着时按 24px 给一份样例，页面不会空着

使用方法

1. 在输入框里填一个值，例如 24px
2. 如果只填了数字，用下拉框选它的单位
3. 按需要调整根字号、当前字号与视口尺寸
4. 读结果，点某一行的「复制」单独取走

常见问题

为什么没有百分比（%）这一行？

因为百分比在 CSS 里没有单一的含义：字号里的 `100%` 等于继承来的字号，而宽度、高度、`padding`、`translate` 里的百分比各有各的参照物（包含块、元素自身尺寸、视口……）。工具不知道这个值将来写在哪个属性上，给一个数字就是编的。字号场景有 `em` 行完全等价（`1em === 100%`），所以这个缺口不影响日常换算。

为什么没有 ch、ex、lh、cqw？

因为它们的换算取决于这个工具拿不到的东西。`ch` 是「0 字形的宽度」、`ex` 是「小写 x 的高度」，两者都取决于具体字体的度量；`lh` 是当前行高；`cqw` 相对的是最近的容器查询容器。这些值只有元素真正渲染出来才知道，任何离线换算都会给出一个看着合理的错误答案。输入这些单位时工具会明确说明原因，而不是悄悄按 px 处理。

1in 到底是多少像素？

96px，这是 CSS 规范写死的，与屏幕的实际像素密度无关 —— 所以这里不需要你填「屏幕分辨率」之类的参数。只有在做印刷品（要真实物理尺寸）时才需要另一套换算，那是 PPI 计算器的事。`pt` 由此推出：1 英寸 = 72 磅，所以 `1pt = 96 ÷ 72 ≈ 1.333px`，`12pt` 正好是 `16px`。

rem 和 em 到底差在哪？

`rem` 的参照物永远是根元素（`<html>`）的字号，一处改全局变；`em` 的参照物是当前元素的字号，而那个字号通常是从父级继承下来的，所以同一份 CSS 嵌在深一层里就会得到不同的结果 —— 这既是它的用途（随上下文缩放），也是它最容易出意外的地方。这个工具把两者分开成两个可调参数，就是为了让这个差别看得见。