px
CSS 单位换算
px / rem / em / pt 在指定根字号下相互换算,前端还原设计稿常用。本地计算。
本地处理 · 不上传
加载工具中…
相关：px转rem · rem换算 · CSS单位 · px em pt · 单位换算
CSS 单位换算在 px、rem、em、pt、vw 等单位之间转换，可设置根字号与视口尺寸作为换算基准。
使用步骤
- 设置根字号与视口尺寸
- 输入数值与原单位
- 查看各单位的对应值
- 复制使用
使用场景
- 把设计稿的像素值转成 rem
- 理解响应式单位的实际大小
- 统一项目的单位规范
- 调试布局时的单位换算
小贴士
- rem 相对于根元素字号，em 相对于父元素字号。em 会层层累积，嵌套三层后实际大小往往超出预期，这是它最常见的坑。
- 用 rem 定义字号与间距，用户调整浏览器默认字号时页面才能整体缩放，这是无障碍的基本要求。
- vw 与 vh 相对于视口尺寸，用它做字号时要配合 clamp 设置上下限，否则在极端屏幕上会失控。
常见问题
rem 和 em 有什么区别？
rem 永远相对于根元素字号，值是确定的；em 相对于当前元素的父级字号，在嵌套结构中会层层放大或缩小。做全局尺寸用 rem，做元素内部的相对间距用 em。
为什么不直接用 px？
px 是绝对值，用户在浏览器中调大默认字号时页面不会响应，这对视力不佳的用户是实实在在的障碍。字号与间距用 rem 才能随之缩放。
设计稿的 px 怎么转 rem？
除以根字号即可，默认根字号是 16px，所以 24px 等于 1.5rem。有些项目会把根字号设为 62.5%（即 10px）以简化心算，但这会影响用户的字号设置。
CSS 单位换算是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用CSS 单位换算，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。