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

功能特性

可设置根字号

px ↔ rem ↔ em ↔ pt

输出可直接用的 CSS 代码

使用方法

1. 设置根字号（默认 16px）。

2. 在任意单位字段输入数值。

3. 其他单位会自动更新。

关于这个工具

像素直观易懂，但 rem 单位会随用户设置的首选字号缩放，这对无障碍很重要。这个转换器根据你设置的根字号（默认 16px，即浏览器标准）让 px、rem、em 和 pt 保持同步。在任一字段输入数值，其余字段自动更新，你可以把设计稿中的像素值换算成样式表里的 rem，或者查看 12pt 的印刷字号在屏幕上相当于多少。换算时假设 em 与 rem 以同样的基准字号计算——当父元素使用根字号时确实如此；自带字号的嵌套组件会有所不同。

常见问题

rem 和 em 有什么区别？

rem 相对于根元素的字号，所以整个页面中 1rem 都一样大；em 相对于当前元素父级的字号，在嵌套元素中会层层叠加。本转换器把 em 视为相对于你输入的根字号。

为什么字号用 rem 比用 px 好？

如果访问者在浏览器设置里调大默认字号，用 rem 设置的文字会随之变大，而用 px 设置的文字会忽略这一偏好。字体和间距使用 rem，能让视力不好的人浏览得更舒适。

点（pt）和像素怎么换算？

CSS 规定 1 英寸 = 96px = 72pt，所以 1pt 等于 4/3 px（约 1.333px），12pt 的字号就是 16px。

要不要把根字号设为 62.5%？

设置 html { font-size: 62.5% } 会让 1rem 等于 10px，计算更简单，但会把默认文字缩小，需要在各处补偿。现在很多团队保留默认的 16px，改用这样的转换器来换算。

CSS 里的 1px 等于屏幕上的一个物理像素吗？

在高密度屏幕上不是。CSS 像素是参考单位；在像素比为 2 的设备上，一个 CSS 像素在横纵方向上各由两个物理像素绘制。

CSS 单位转换（px ↔ rem ↔ em ↔ pt）

功能特性

使用方法

关于这个工具

常见问题

相关工具