CSS 单位转换器(px / rem / em / pt)

直接在浏览器中转换像素、rem、em 和磅之间的数值。

示例:

工作原理

一个典型的前端集成使用场景:Figma 设计稿中的所有尺寸都以像素表示(16px、24px、32px……),但无障碍最佳实践建议在 CSS 中使用像 rem 这样的相对单位,以便当用户增大浏览器默认字号时文字能够正确放大。输入从设计稿读到的像素值,选择「px」到「rem」,并填入网站惯用的基础字号(默认 16px),即可将结果直接粘贴到您的 CSS 中。

为什么需要基础字号?

rem 和 em 都是相对单位:1rem 等于根元素(html)的字号,而 1em 等于当前元素的字号。如果不知道这个参考字号(浏览器默认通常是 16px,但有时会被样式表修改),就无法与 px 相互转换。因此本工具要求您指定用作参考的基础字号。

rem 和 em 有什么区别?

rem(「root em」)始终相对于文档根元素的字号计算,因此在页面任何位置都是可预测的。em相对于最近的父元素的字号计算,可能会层层累积。本工具将两者一视同仁,使用您指定的基础字号作为共同参考。

转换过程完全通过 WebAssembly 在您的浏览器中执行:您的数值永远不会传输到服务器。