CSS 单位换算 — px / rem / em / vw
在 px、rem、em、vw、vh、% 之间换算。可设置根字号和视口宽度，让 rem、视口单位贴近你的设计规范。
rem 用根字号；vw 与 % 用视口宽度作参照。
设计稿常用 px，代码常用 rem，来回心算容易错；对着数字换最省事。
视口单位依赖设备宽度——把视口宽设成你正在设计的断点。
怎么用
- 输入数值并选择单位
- 确认根字号与视口宽
- 复制结果到 CSS
适合什么人
- 根字号不是 16 时怕算错 rem
- 想快速看 vw 实际像素
- 不想开计算器
场景
- Figma 间距改 rem
- 核对某断点下 40vw 多宽
- 教学演示 rem 与 em
提示
- 本页 em 的父字号默认等于根字号；组件字号不同时请自行换算。
- 来回换可能有一点点小数误差，写 CSS 通常够用。
示例
| 输入 | 输出 | 说明 |
|---|---|---|
| 16px → rem（根 16） | 1rem | — |
| 视口 1280 时 50vw | 640px | — |
常见问题
- rem 相对谁？
- 相对你填写的根字号（常见 16px）。若 html 字号不是 16，请改成实际值。
- % 和 vw 一样吗？
- 不一定。这里 % 暂时按「与视口宽相同的参照」近似，方便估算；真实布局以父容器为准。