CSS单位转换
在 px、rem、em、pt、vw 等 CSS 单位之间相互转换，支持自定义基准字号，方便响应式开发。
CSS 单位转换
px（浏览器默认 16px）
输入数值后自动换算
CSS 单位转换工具使用指南
📌 简介
CSS 单位转换工具是一款面向前端开发者的在线工具，可以在 px、rem、em、pt、pc、in、cm、mm、vw、vh 十种单位之间自由换算。支持自定义根字号（html font-size），帮助开发者快速将设计稿中的 px 尺寸转换为响应式的 rem 或 vw，提升开发效率。所有换算在浏览器本地完成。
📖 CSS 单位科普
px（像素）： 绝对单位，设计稿中最常见。rem： 相对于根元素（html）的字体大小，是响应式布局的首选。em： 相对于父元素字体大小。pt（磅）： 印刷单位，1pt = 1/72 英寸，常用于打印样式。vw/vh： 相对于视口宽度/高度的百分比单位，1vw = 视口宽度的 1%。in/cm/mm： 物理长度单位，与屏幕的物理尺寸无关，1in = 96px。
💼 常见应用场景
- 设计稿还原： 将 Sketch/Figma 中的 px 尺寸转为 rem。
- 响应式开发： 使用 vw 实现大屏自适应布局。
- 打印样式： 将 px 转为 pt 用于打印样式表。
- 旧项目重构： 把固定 px 项目改造为 rem 方案。
- 跨端适配： 在 H5、小程序、App 之间转换尺寸单位。
⚙️ 使用步骤
- 设置根字号（html font-size），默认 16px。
- 输入数值，选择原始单位。
- 下方会实时显示 10 种单位的换算结果。
- 点击任意结果卡片即可复制该值。
⚠️ 注意事项
- rem 换算基于您设置的根字号（html font-size），默认 16px。
- em 的换算较为复杂，取决于父元素字号，本工具按根字号近似计算。
- vw/vh 换算基于当前浏览器视口尺寸，调整窗口后会重新计算。
❓ 常见问题 (FAQ)
Q: 为什么 1rem 等于 16px？
A: 浏览器默认的 html 根字号是 16px，所以默认情况下 1rem = 16px。可以通过 CSS 设置 html { font-size: 62.5%; } 让 1rem = 10px，方便计算。
Q: px 和 pt 有什么关系？
A: 1pt = 1/72 英寸，1 英寸 = 96px，所以 1pt = 96/72 = 1.333px。反之 1px = 0.75pt。
Q: vw 和 % 有什么区别？
A: vw 永远相对于视口宽度，而 % 相对于父元素的宽度。如果父元素不是全屏，两者结果不同。