CSS 单位转换
px、rem、em、vw、vh 等单位互转
单位时间与数值
🔒 100% 本地运行 — 你的数据不会离开当前页面由 Evan 维护•最近更新：2026年9月29日
页面阅读模式
完整说明还包括常见问题处理、操作示例、代码片段、FAQ 和相关工具，便于核对结果或排查问题。
工具说明
按设定基准换算 px、rem、em、vw、vh、pt、cm、mm、in 和百分比。本工具的 em、rem 均使用根字号，% 也固定相对根字号；vw/vh 使用输入的视口尺寸，物理单位按近似 CSS 像素比例换算，不是屏幕实测。
场景配方
01
按明确的 16px 基准换算 24px
目标：记录字体换算所使用的条件。
- 根字号设置为 16。
- 在 px 框输入 24。
- 读取共用该基准的 1.5rem、1.5em 和 150%。
结果：这里的 em 与百分比是计算器假设，并非元素实测结果。
失败门诊（高频踩坑）
百分比参照的不是父容器宽度
原因：% 始终使用根字号，em 也共用此基准。
修复：换算宽度、transform 或元素相对 em 时，需检查实际 CSS 属性及对应参照尺寸。
生产可用片段
示例
text
24px / 16px = 1.5rem
24px / 16px × 100 = 150%（相对所设根字号）常见问题
为什么 em 和 rem 的值一样？
本工具假设两者都使用设置的根字号。例如根字号 16px 时，24px 都显示为 1.5。真实 CSS 的 em 取决于元素的字体上下文；元素字号不同，就不能直接采用这里的 em 结果。
百分比能用于 width 或 transform 吗？
这里的 % 固定相对于根字号，16px 根字号下 24px 对应 150%。它不是所有 CSS 百分比的通用换算；宽度、位移等要按具体属性的参照尺寸计算。
视口和厘米结果代表当前设备的实测值吗？
不是。vw/vh 使用手动输入的视口宽高，英寸按 96 CSS px 换算，pt/cm/mm 用近似比例，结果最多保留 4 位小数。不会测量屏幕物理尺寸，也不模拟移动端动态视口；根字号和视口宽高必须大于 0。
继续浏览