输入
像素值(px)
根字号(px)
父级字号(px)
视口宽度(px)
视口高度(px)
结果
rem1.50rem
em1.50em
vw6.40vw
vh3.60vh

CSS 单位转换器

CSS 单位转换器支持 px、rem、em、vw、vh 之间的常用换算,适合移动端适配和响应式样式编写。

CSS 单位转换器是什么

CSS 单位转换器用于把 px 快速换算成 rem、em、vw 和 vh。前端开发常常需要根据设计稿尺寸、根字号、父级字号和视口宽高换算样式值,手动计算既慢又容易出现小数错误。

本工具把常用换算结果集中在一个页面中展示,适合移动端适配、响应式布局、设计系统变量整理和组件样式编写。输入像素值后即可同时看到多种 CSS 单位,方便选择最适合当前场景的写法。

核心功能

  • 支持 px 转 rem,并可自定义根字号。
  • 支持 px 转 em,并可自定义父级字号。
  • 支持 px 转 vw、vh,并可设置视口宽高。
  • 结果以卡片展示,适合一屏查看和快速复制。

适用场景

根据 375px 移动端设计稿换算 vw 或 rem 值。

组件内部需要相对父级字号设置 em 尺寸。

整理 CSS 变量、响应式间距和字体尺寸时快速核对单位。

使用建议

rem 受根字号影响,使用前要确认项目 html font-size 的实际设置。

vw、vh 与视口尺寸强相关,移动端还需要考虑浏览器地址栏和安全区域影响。

常见问题

px、rem 和 em 应该怎么选?

固定细节可用 px,跟随根字号可用 rem,跟随父级文字大小可用 em。

vw 换算适合所有场景吗?

不一定。vw 适合流体布局,但正文文字和关键交互尺寸仍建议设置合理上下限。