CSS单位转换器 — px/rem/em/vw/vh在线互转
在线将px、rem、em、vw、vh、%、pt、cm、mm、ch、vmin、vmax互相转换。可自定义根字号和视口尺寸。浏览器本地处理。
功能特性
- ✓支持所有CSS单位互转：px、rem、em、vw、vh、%、pt、cm、mm、ch、vmin、vmax
- ✓自定义根字号（默认16px）用于rem/em转换
- ✓自定义父元素和当前元素字号用于em计算
- ✓设置视口宽高用于vw/vh/vmin/vmax转换
- ✓预设常见设备视口尺寸（iPhone、iPad、笔记本、桌面）
- ✓按绝对单位和相对单位分组显示结果
- ✓点击任意结果即可复制
- ✓输入即转换，实时显示
- ✓同时计算所有11个目标单位
- ✓所有计算在浏览器本地完成，数据不上传
使用方法
- 1在输入框中输入数值。
- 2从下拉菜单选择源单位。
- 3即时查看所有其他CSS单位的转换结果。
- 4在设置中调整根字号，适配不同项目。
- 5设置视口尺寸匹配目标设备或屏幕。
- 6点击设备预设（iPhone、iPad等）自动填充视口尺寸。
- 7点击任意结果卡片即可复制。
- 8在响应式设计中px和rem迁移时使用。
- 9使用视口预设测试vw/vh在不同屏幕上的效果。
- 10对比绝对单位（px、pt、cm、mm）和相对单位（rem、em、%、vw）。
常见问题
px、em和rem有什么区别？
∨
px是绝对单位——1px始终是1px。em相对于父元素的字号。rem相对于根（html）字号，通常是16px。rem在组件间保持一致的尺寸。
什么时候用rem，什么时候用px？
∨
响应式设计中的字号和间距用rem——它会随用户浏览器设置缩放。边框和小装饰元素用px，它们应保持固定大小。
vw和vh是什么？
∨
vw = 视口宽度的1%，vh = 视口高度的1%。例如在1920px宽的屏幕上，50vw = 960px。适用于全屏区块和响应式排版。
vmin和vmax有什么区别？
∨
vmin是视口较小维度的1%，vmax是较大维度的1%。手机竖屏时vmin等于vw（宽度较小），vmax等于vh（高度较大）。
CSS中的ch是什么？
∨
ch相对于当前字体中'0'字符的宽度。常用于设置文本容器的max-width，如限制段落为65ch以获得最佳可读性。
浏览器的默认根字号是多少？
∨
浏览器默认html元素字号为16px。大多数CSS框架保持此默认值。某些设计师改为10px或62.5%以便rem计算（1rem = 10px）。
怎么把px转成rem？
∨
将像素值除以根字号。例如24px ÷ 16px = 1.5rem。本工具即时完成——输入数值即可查看所有转换结果。
为什么rem值和预期的px值不匹配？
∨
检查根字号是否从默认16px被修改。如果CSS设置了html { font-size: 14px }，那么1rem = 14px而不是16px。使用设置面板匹配你项目的根字号。
能用这个工具做打印样式吗？
∨
可以。绝对单位（pt、cm、mm）适用于打印CSS。1pt = 1/72英寸，1cm = 96/2.54 px。在设计打印布局的样式表时使用这些单位。
移动优先设计应该用什么视口尺寸？
∨
常见移动端视口：iPhone SE (375x667)、iPhone 14 (390x844)、iPad (768x1024)。桌面端：笔记本 (1366x768)、全高清 (1920x1080)。使用设置中的预设按钮快速切换。