CSS 单位换算器
在 px、rem、em、pt、%、vw 和 vh 之间换算 CSS 长度。
正在加载工具…
CSS 单位换算器 — 一次性把一个 CSS 长度值换算为 px、rem、em、pt、%、vw 和 vh。先设置根字号、父级字号以及视口的宽和高，再输入数值并选择单位，所有等价值便会即时显示。全部计算都在浏览器中完成，你输入的内容绝不会被上传。
CSS 单位换算器 是什么？
CSS 单位换算器是一款免费的浏览器内工具，可将单个 CSS 长度换算为七种常用单位：px、rem、em、pt、%、vw 和 vh。前端开发者和网页设计师用它在绝对像素与响应式单位之间转换，检查在自定义根字号下 rem 对应多少像素，或把印刷用的 pt 值转成屏幕像素。由于 rem 取决于根字号，em 和 % 取决于父级字号，vw/vh 取决于视口，因此换算器把这四项都做成可调设置。输入数值、选择源单位，所有结果栏便会同时更新。生成的 CSS 代码片段会把七种等价值列为 font-size 声明，可直接复制粘贴。
如何使用 CSS 单位换算器
- 打开“设置”，设定根字号（rem 所基于的 html 字号）、父级字号（用于 em 和 %），以及视口的宽和高（用于 vw 和 vh）。
- 在数值输入框中输入要换算的数字。
- 从“源单位”下拉菜单中选择源单位：px、rem、em、pt、%、vw 或 vh。
- 在带标签的只读结果栏中查看各个等价值；当你更改数值、单位或任一设置时，它们都会自动重新计算。
- 复制生成的 CSS 代码片段，把全部七种 font-size 等价值直接粘贴进你的样式表。
示例
根字号 16 时 px 转 rem
输入
根字号 16px，数值 16，源单位 px
输出
rem = 1
根字号 10 时 rem 转 px
输入
根字号 10px，数值 2，源单位 rem
输出
px = 20
px 转 pt
输入
数值 16，源单位 px
输出
pt = 12
常见问题
- 它能在哪些单位之间换算？
- 七种 CSS 长度单位：px、rem、em、pt、%、vw 和 vh。其中任何一种都可作为源单位，七种等价值会同时显示。
- 为什么需要设置根字号、父级字号和视口尺寸？
- 这些单位是相对的。rem 是根（html）字号的倍数，em 和 % 相对于父级字号，vw/vh 是视口宽度和高度的百分比。在“设置”中填入这些值，换算器才能知道每个相对单位对应多少。
- pt 是如何处理的？
- CSS 规定 96px = 1in = 72pt，所以 1pt 等于 4/3 px，1px 等于 0.75pt。换算器使用这个固定比例，与字号或视口无关。
- 如果数值或设置无效会怎样？
- 如果数值不是有限数，或者根字号、父级字号、视口尺寸中任何一项缺失、为零或为负，结果栏会显示破折号（—），直到你提供有效数字为止。
- 会有内容被发送到服务器吗？
- 不会。所有换算都完全在你的浏览器中进行，不上传任何内容，也不调用服务器，因此你输入的数值绝不会离开你的设备。