什么是CSS 单位转换器？
CSS 支持多种不同的尺寸单位——绝对单位如 px 和 pt，以及相对单位如 rem、em、vw、vh 和 %。相对单位对于响应式、无障碍设计至关重要（rem 尤其能尊重用户浏览器的字体大小偏好设置），但在脑海中进行单位换算实际上相当困难，因为结果取决于上下文：根字体大小、当前元素的字体大小，或视口尺寸。
这款转换器会替你完成这些计算：设置你的基础字体大小、视口尺寸以及要转换的数值，即可立即看到在其他每个单位下的等效值——无论是将设计稿的像素测量值转换为响应式的 rem/vw 值，还是仔细核对某条现有 CSS 规则在屏幕上实际渲染出的效果，都非常有用。
何时使用此计算器
- 在开始项目之前需要评估工具成本时
- 将结果与其他类似工具进行比较时
- 学习如何在不同场景中使用工具时
- 与团队或客户分享结果时
- 验证工具计算的准确性时
- 寻找快速简便的方法解决特定问题时
步骤:
- 输入你想要转换的数值，并选择其起始单位。
- 设置你的基础字体大小（默认为浏览器标准的 16px）。
- 对于 vw/vh 转换，请输入目标视口的宽度和高度。
- 立即查看在其他每个单位下的等效值。
公式
1rem = 1em = 基础字体大小（默认 16px）
1pt = 96/72 px ≈ 1.333px
1vw = 视口宽度 / 100
1vh = 视口高度 / 100
1% = 参考值 / 100
使用场景
- 将设计师基于像素的 Figma/Sketch 规格转换为无障碍 CSS 所需的 rem 值
- 检查基于 vw 的响应式字体大小在特定屏幕宽度下实际渲染出的效果
- 将基于 pt 的旧版打印或邮件 CSS 转换为符合网页标准的 px 或 rem
- 审核设计系统的间距比例在不同单位之间是否保持一致
- 在代码审查过程中快速核对某个 CSS 数值，而无需打开开发者工具
主要优势
- 在一处即可完成全部 7 种常用 CSS 单位之间的转换
- 使用你实际的基础字体大小和视口，而非固定的假设值
- 输入的同时即时给出结果——无需打开浏览器开发者工具
- 免费、无需注册，完全在你的浏览器中运行
专业提示
- 字体大小优先使用 rem 而非 em，以避免嵌套组件中出现意外的叠加
- 如果目标浏览器支持，移动端全屏布局请使用 dvh/svh 而不是 vh
- 在整个设计系统中保持一致的基础字体大小，使 rem 转换保持可预测
- 在转换像素级精确设计时，将间距转换为 rem，但将边框宽度等细节保留为 px
需要避免的常见错误
- 假设 1rem 始终等于 16px，而不检查根字体大小是否被更改过
- 在移动端全高布局中使用 vh，却没有考虑浏览器地址栏的行为
- 嵌套基于 em 的字体大小，却对其意外叠加感到意外
- 在同一组件内不一致地混用 px 和 rem，破坏了无障碍缩放
关键术语解释
- 根字体大小：设置在html元素上的font-size，所有rem单位都相对于它
- 视口（Viewport）：浏览器窗口中网页的可见区域
- 绝对单位（Absolute unit）：像 px 或 pt 这样具有固定真实尺寸、不依赖任何上下文的单位
- 相对单位（Relative unit）：像 rem、em、vw 或 % 这样的单位，其大小取决于另一个值
相关概念
- 颜色转换器: 在 HEX、RGB 和 HSL 颜色格式之间转换
- 长度转换器: 在英寸、厘米、像素等之间转换
- 单位转换器: 在各种测量单位之间转换
- 宽高比计算器: 计算并转换宽高比
- 数据转换器: 在字节、KB、MB、GB 和 TB 之间转换
示例
在基础字体大小为 16px 时，1.5rem 转换为 24px。在视口宽度为 1440px 时，5vw 转换为 72px。
解读您的结果
此工具根据您提供的输入显示详细结果。请仔细查看每个部分，了解如何解释数字并据此做出决策。
如果您对工具的工作方式或如何解释特定结果有疑问，请参阅下面的常见问题解答部分或联系支持。