CSS单位换算

本地处理

输入数值

源单位

根字体大小（px，用于 em / rem 换算）

视口宽度（px，用于 vw 换算）

视口高度（px，用于 vh 换算）

功能说明

CSS单位换算工具是一款面向前端开发的在线辅助工具，支持 px、em、rem、vw、vh、pt 六种常用 CSS 长度单位的实时互转，帮你快速在不同布局单位之间切换。

工具默认以 16px 为根字体基准、1920×1080 为视口尺寸，你也可以在换算前自定义这些基准值，以精确匹配你的实际项目环境。所有计算在浏览器本地完成，数据不上传。

适用于响应式布局调试、移动端适配、老旧项目 px 转 rem、设计稿标注换算等场景。

1. 在输入框填写数值，并选择它的源单位。

2. 如需精确换算 em/rem，填写项目的根字体大小（默认 16px）。

3. 如需换算 vw/vh，填写实际视口宽度与高度（默认 1920×1080）。

4. 结果区会实时显示该数值在所有单位下的值，点击"复制"可一键复制。

px 是绝对像素；em 相对当前元素的字体大小，会随父级嵌套层层放大；rem 相对根元素（html）字体大小，不受父级影响，更适合全局统一控制。移动端常用 rem 做等比缩放。

vw 是视口宽度的 1%，vh 是视口高度的 1%。1vw 等于"视口宽度÷100"个像素，因此同样的 vw 值在不同屏幕上对应的 px 不同，是真正的响应式单位。换算时需要填入实际视口尺寸。

pt（磅）是印刷单位，1pt = 1/72 英寸。在 CSS 中 1in = 96px，因此 1pt ≈ 1.333px。pt 常用于打印样式或某些设计稿标注，日常 Web 布局较少使用。

px 固定直观适合边框与精细尺寸，rem 相对根字号适合整体缩放与响应式，em 随父级字号适合组件内部相对布局；混用要有明确规则。

1rem 等于根元素字号（默认 16px）；把根字号设为 62.5%（10px）可让 rem 计算更直观（1.6rem = 16px），是最常见的实践。

移动端浏览器地址栏收缩会导致 vh 变化，引起布局跳动；可用动态视口单位或 JS 修正，页面高度布局需注意这一点。