CSS 单位换算 — px、rem、em、pt 和 %
基于任意根字号在 px、rem、em、pt 和 % 之间相互换算。输入数值即可实时更新所有单位,并连同单位一起复制。
🔒 全部在你的浏览器中运行。输入和输出都不会发送到服务器或被保存,十分安全。
em 与 rem 处理相同(相对于根字号)。点击任意数值即可连同单位一起复制。
这个工具有用吗?点一下表达心情
关于此工具
在你每天都会用到的 CSS 单位之间进行换算——px、rem、em、pt 和百分比——并以你自己设定的根字号为基准。设好基准字号,用任意单位输入一个数值,就能立即看到它的所有等价值,从而在制作响应式、无障碍的布局时不再靠猜。无论是把设计稿从像素换算成 rem,还是让文字大小流畅缩放,计算都会在你的浏览器中替你完成,不向任何地方发送数据。
常见问题
px、em 和 rem 有什么区别?
像素(px)是固定的绝对单位。em 相对于当前元素的字号,因此当元素层层嵌套时,数值会逐级叠加。rem 相对于页面的根字号,所以无论用在哪里都保持可预测。磅(pt)源自印刷,在常见的 96 DPI 下约等于 1.333 px。
为什么要把像素换算成 rem?
用 rem 设定尺寸,可以让你的布局随读者选择的字号一同缩放,这对无障碍和响应式设计更有利。当有人调大浏览器的默认文字大小时,基于 rem 的间距和文字会随之变大,而固定像素则纹丝不动。把像素值按一个已知的根字号(通常是 16 px)换算成 rem,就能在不重做整套设计的情况下获得这种弹性。
换算是在服务器上进行的吗?
不会。所有计算都在你输入时于浏览器中完成,因此你输入的数值绝不会被上传、记录或存储到任何地方。工具只是用你设定的根字号在各单位之间即时换算;页面加载之后,即使离线也能继续使用——你设计的任何信息都不会离开设备。