CSS 单位转换

CSS 单位转换

在线 CSS 单位转换工具,支持 px、rem、em、vw、vh、% 等单位互转

转换模式:
输入数值:
单位:
常用数值:
转换结果:
12pt
1/72英寸,印刷单位
1pc
12点,1/6英寸
0.1667in
物理英寸单位
0.4233cm
物理厘米单位
4.2333mm
物理毫米单位

使用说明

绝对单位:

  • px (像素):屏幕上的物理像素点,最常用的单位
  • pt (点):1/72英寸,主要用于印刷
  • pc (派卡):12点,等于1/6英寸
  • in (英寸):物理英寸单位
  • cm (厘米):物理厘米单位
  • mm (毫米):物理毫米单位

相对单位:

  • rem:相对于HTML根元素字体大小,推荐用于响应式设计
  • em:相对于父元素字体大小,可能产生累积效应
  • vw:视口宽度的1%,适合全屏布局
  • vh:视口高度的1%,适合全屏布局
  • vmin:vw和vh中的较小值
  • vmax:vw和vh中的较大值
  • %:相对于父元素的百分比

换算关系:

  • 1in = 96px (在96dpi下)
  • 1in = 72pt
  • 1in = 6pc
  • 1in = 2.54cm
  • 1pt = 1.333px
  • 1pc = 12pt = 16px

CSS 单位转换

在线 CSS 单位转换工具,支持 px、rem、em、vw、vh、% 等单位互转

本地运行 · 数据不上传

详细说明

一款实用的 CSS 单位转换工具,支持 px、rem、em、vw、vh 和百分比之间的相互转换。可自定义根字体大小,支持批量转换多个数值,是前端响应式开发的必备工具。

功能特点

  • px 转 rem
  • px 转 em
  • px 转 vw/vh
  • rem 转 px
  • 百分比单位转换
  • 批量转换多个数值
  • 自定义根字体大小

使用方法

  1. 1 在输入框中输入需要转换的数值
  2. 2 选择源单位(px、rem、em、vw 等)
  3. 3 选择目标单位
  4. 4 设置根字体大小(如需 px ↔ rem 转换)
  5. 5 查看转换结果并复制使用

使用技巧

  • 将设计稿的 px 值批量转换为 rem 可大幅提高开发效率
  • 移动端适配推荐使用 vw 单位实现等比缩放
  • 使用 rem 时确保根字体大小与设计稿一致

相关工具

标签 CSS单位转换

常见问题

rem 和 em 有什么区别?

rem 相对于根元素(html)字体大小,em 相对于父元素字体大小。rem 更可预测,em 适合组件内部缩放。

为什么需要转换 CSS 单位?

响应式设计需要在不同屏幕尺寸下适配布局,使用 rem/vw 等相对单位可以实现更好的跨设备兼容性。

根字体大小设为多少合适?

浏览器默认为 16px,多数框架也以此为基准。可根据设计稿调整,但建议保持统一标准。