CSS 单位转换器

常用转换参考

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

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

各单位使用场景

• px — CSS 像素，不等于屏幕的物理像素：在 2 倍屏上，一个 CSS 像素占 2×2 个物理像素，页面缩放时也会跟着变大。它不跟随浏览器的字号设置。适合边框、阴影等细节。
• rem — 只要根字号没有用 px 写死，就会随用户在浏览器里设置的字号缩放。无障碍设计中字体和间距的首选。
• 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

示例：用了 lib-flexible 的移动端页面

国内不少移动端项目用过阿里巴巴 amfe 团队的 lib-flexible。2.x 版本（npm 包 amfe-flexible）的脚本把根字号设为屏幕宽度的十分之一（源码注释写的是 set 1rem = viewWidth / 10），所以在 375px 宽的手机上，根字号是 37.5px。展开“设置”，根字体大小填 37.5，视口宽度填 375，再输入 24 并选 px：

结果是 0.64rem 和 6.4vw。两个数正好差十倍，因为在这种页面里 1rem 就是 10vw。反过来输入 1 并选 rem：

得到 37.5px 和 10vw。根字体大小和视口宽度都可以填 37.5 这样的小数。

lib-flexible 的 README 已经写明这个过渡方案可以放弃，建议改用 viewport 单位。迁移时可以拿这个工具对照：根字号与视口宽度按上面填好，单位选 rem，输入旧的 rem 值，就能直接读出对应的 vw。

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 是桌面宽度，请填目标宽度（如手机填 375 或 390）再看 vw 值。
• 结果保留 6 位有效数字，例如 1920px 下 16px 是 0.833333vw。
• vw 包含滚动条。 桌面浏览器显示常规滚动条时，100vw 是含竖向滚动条的窗口宽度，可能比内容区宽，从而出现横向滚动条。
• 数值框只接受数字。 带单位输入 16px 不会被识别，请在单位菜单里选择单位。根字体大小或视口宽度留空、填 0 时，分别按 16px 和 1920px 计算；填负数时状态栏报错，结果清空。