CSS 单位转换工具 — 免费在线

在 px、rem、em、pt 和百分比等 CSS 单位之间转换,支持自定义基准大小。

根元素大小(px)
—

结果仅供参考,可能包含错误。请自行核实重要信息。使用本工具风险自负。

这个工具能做什么

CSS 单位转换工具可以在 px、rem、em、pt 和 % 之间转换长度。输入数值,选择单位,再设置基准字号(默认 16px,除非用户修改过,浏览器使用的就是这个值),页面就会列出同一长度在全部五种单位下的值。

换算遵循 CSS 规范:1rem 等于根元素字号,所以基准为 16px 时,1.5rem 就是 24px。1 磅(pt)是 1/72 英寸,1 个 CSS 像素是 1/96 英寸,因此 12pt 等于 16px。这里的 em 和 % 都按同一基准计算,相当于在父元素使用根字号的元素上设置字号。所有数据都不会离开你的浏览器。

适用场景

  • 把设计稿中的像素值转换为 rem,让文字随用户的字号设置缩放。
  • 转换以磅(pt)为单位的打印样式表或 PDF 设计稿。
  • 接手别人的 CSS 时,确认 % 字号实际解析为多少。
  • 构建字号层级(type scale),每一级都需要一个整洁的 rem 值。

示例

输入

24px,基准 16px

输出

px   24.000
rem  1.5000
em   1.5000
pt   18.000
%    150.00%

关于这个工具的问题

字号应该用 rem 还是 px?

字号和大多数间距都用 rem。当有人为了便于阅读而调大浏览器的默认字号时,rem 值会随之变大,而 px 值保持不变。

rem 和 em 有什么区别?

rem 始终相对于根元素(html)的字号。em 相对于当前元素的字号,所以嵌套时会相乘:1.2em 里面再套 1.2em,结果是基准的 1.44 倍。本转换工具对两者都按你输入的基准计算。

为什么 1pt 不等于 1px?

CSS 把 1 英寸固定为 96 像素,而 1 磅是 1/72 英寸,所以 1pt 等于 1.333px。因此,文字处理软件中的 12 磅文字与网页上的 16px 大小相同。

应该输入多大的基准值?

输入 16 即可,除非你的样式表设置了不同的根字号,例如 html { font-size: 62.5%; },这会让基准变为 10px。html 元素最终解析为多少,就输入多少。

这个工具免费吗?

是的,完全免费。无需注册或电子邮箱。结果直接显示在本页。

如何获取结果?

在此页面使用工具即可查看结果,无需通过电子邮件接收。