CSS 单位转换器

使用方法

1. 在 Value 输入框中输入数值。
2. 选择源单位（px、rem、em 或 vw）。
3. 下方四种单位的转换结果即时更新。
4. 可选：调整根字体大小或视口宽度以匹配项目设置。
5. 点击任意结果旁的 Copy 按钮复制到剪贴板。

常用转换参考

默认设置（根字体大小 16px，视口 1920px）：

• 16px = 1rem = 1em = 0.833333vw
• 1rem = 16px
• 100vw = 1920px = 120rem

各单位使用场景

• px — 绝对尺寸，跨设备一致。适合边框、阴影等细节。
• rem — 随用户浏览器字体大小缩放。无障碍设计中字体和间距的首选。
• em — 相对于元素自身的字体大小（用在 font-size 上时相对于父元素）。适合组件内部的相对尺寸。
• vw — 相对于视口宽度。适合流体排版和全宽布局。

换算公式

根字体大小 16px、视口宽度 1920px（默认值）时：

rem = px ÷ root font size          24px ÷ 16 = 1.5rem
px  = rem × root font size         1.5rem × 16 = 24px
vw  = px ÷ viewport width × 100    24px ÷ 1920 × 100 = 1.25vw
px  = vw × viewport width ÷ 100    1.25vw × 1920 ÷ 100 = 24px

em 为什么容易出乎意料

本工具把 em 当作 rem 处理，都相对于根字体大小。但在真实页面里，font-size 中的 em 相对于父元素的字体大小，嵌套时会层层相乘（MDN）：

html  { font-size: 16px; }
.card { font-size: 1.25em; }   /* 20px */
.card .title { font-size: 1.25em; }   /* 25px: 1.25 × 20px */
.card .title small { font-size: 1.25em; }   /* 31.25px */

换成 rem，每一层都是 20px。随文字大小变化的尺寸（如按钮内边距）用 em，字号和布局间距用 rem。

限制

• em 按 rem 换算。 只有元素字号等于根字号时结果才准确。
• 只支持四种单位： px、rem、em、vw，不换算 vh、%、pt、ch。
• vw 按你填的宽度计算。 默认的 1920px 是桌面宽度，请填目标宽度（如手机填 390）再看 vw 值。
• 结果保留 6 位有效数字，例如 1920px 下 16px 是 0.833333vw。