免费前端工具
CSS 单位换算 - px、rem、em 和百分比转换
在 px、rem、em 和百分比之间换算 CSS 尺寸，适合前端排版、响应式设计和设计稿还原。
工具加载中...
快速答案
CSS 单位换算工具可以把 px、rem、em 和百分比转换成需要的写法。
它适合设计稿标注、响应式排版和前端样式调整。
适合输入
清晰输入
准备好要处理的CSS 尺寸、基准字号和目标单位，避免混入不相关内容。
确认目标
先确定要复制、换算、统计或生成的结果类型，减少来回调整。
本地复核
结果适合快速处理和初步判断，重要场景仍应按业务规则复核。
换算方式
工具按基准字号或父级字号计算相对单位。
rem 通常相对根字号。
em 通常相对当前或父级字号。
百分比需要明确参考尺寸。
示例、假设和限制
工具结果适合快速估算、转换和整理；关键场景建议按业务规则复核。
示例
根字号 16px 时，24px 等于 1.5rem。
假设
输入的基准字号和参考尺寸与页面实际 CSS 一致。
限制
复杂布局中的继承、缩放和容器查询仍需在真实页面中检查。
常见使用场景
这些中文页面面向轻量、快速、浏览器本地完成的日常任务。
设计稿还原
把 px 标注换成 rem。
响应式排版
调整字号、间距和宽度单位。
组件开发
统一设计系统单位。
代码审查
快速检查单位是否合理。
常见问题
px 转 rem 怎么算？
用 px 数值除以根字号。例如 24px ÷ 16px = 1.5rem。
em 和 rem 有什么区别？
rem 相对根字号，em 通常相对当前元素或父级字号。
这个工具适合前端开发吗？
适合快速换算和检查，但最终效果仍要在页面里确认。
会上传 CSS 数据吗？
不会。换算在浏览器中完成。
推荐流程
前端样式调整流程
先换算单位，再生成响应式 CSS 和检查可访问性。