可以开始使用
浏览器本地 · 无需账号 · 结果留在当前页面
试试常见 CSS 尺寸
px
16px
absolute pixels
rem
1rem
root font size
em
1em
parent font size
%
100%
parent font size
示例 CSS
font-size: 1rem;
基础像素值： 16px
rem uses 16px root size. em and percent use 16px parent size.
此转换依赖上方的根字号和父级字号假设。请在实际运行该 CSS 的组件中确认最终尺寸。
CSS 单位换算工具可以把 px、rem、em 和百分比转换成需要的写法。
它适合设计稿标注、响应式排版和前端样式调整。
清晰输入
准备好要处理的CSS 尺寸、基准字号和目标单位，避免混入不相关内容。
确认输出用途
先确认结果要用于发布、调试、估算、整理还是交付，再选择合适参数。
复核关键边界
结果适合快速处理和初步判断，重要场景仍应按目标平台、团队规则或业务口径复核。
示例
根字号 16px 时，24px 等于 1.5rem。
假设
输入的基准字号和参考尺寸与页面实际 CSS 一致。
限制
复杂布局中的继承、缩放和容器查询仍需在真实页面中检查。
先确认基准字号
rem 和 em 都依赖上下文，换算前要知道 root font-size 或当前组件的字体大小。
区分设计稿和代码口径
Figma 标注、浏览器计算值和 CSS 变量可能不是同一口径，复制结果前先看来源。
移动端单独复核
px 转 rem 后仍要在手机宽度检查字号、间距和点击区域，避免只在桌面看起来正常。
根字号假设不一致
px 转 rem 前要确认项目 root font-size，设计稿默认 16px 不代表线上页面也是 16px。
把 em 当 rem 使用
em 会受当前元素或父级字号影响，嵌套组件里结果可能和预期不同。
只换算不看容器
单位换算后还要在真实容器、断点和浏览器缩放下检查布局是否溢出。
适合设计到代码交接
把设计稿里的 px 换成 rem 或 em，能让字号、间距和组件尺寸更容易接入响应式 CSS。
组件内部用 em 要谨慎
em 会继承当前元素字号，嵌套组件里结果可能和 root-based rem 不一样。
和 clamp 搭配更自然
固定换算适合单值；如果要随屏幕变化，继续用 clamp 生成器做流式尺寸更合适。
设计稿还原
把 px 标注换成 rem。
响应式排版
调整字号、间距和宽度单位。
组件开发
统一设计系统单位。
代码审查
快速检查单位是否合理。
px 转 rem
根据项目根字号，把设计稿里的像素值换算成 rem 写进 CSS。
em 和 rem 对比
检查组件内部字号、间距和继承关系，决定该用 em 还是 rem。
响应式尺寸换算
把固定尺寸先换算成相对单位，再结合断点、clamp 或容器宽度复核。
px 转 rem 怎么算？
用 px 数值除以根字号。例如 24px ÷ 16px = 1.5rem。
em 和 rem 有什么区别？
rem 相对根字号，em 通常相对当前元素或父级字号。
这个工具适合前端开发吗？
适合快速换算和检查，但最终效果仍要在页面里确认。
会上传 CSS 数据吗？
不会。换算在浏览器中完成。
rem 和 em 的区别是什么？
rem 通常基于根元素字号，em 基于当前元素或上下文的字号。嵌套组件里 em 的结果更容易随上下文变化。
px 转 rem 后为什么页面看起来还是不对？
换算只解决数值关系，真实效果还受 root font-size、媒体查询、容器宽度和浏览器缩放影响。
px 转 rem 怎么算？
用 px 数值除以根字号。例如 24px ÷ 16px = 1.5rem。
em 和 rem 有什么区别？
rem 相对根字号，em 通常相对当前元素或父级字号。
这个工具适合前端开发吗？
适合快速换算和检查，但最终效果仍要在页面里确认。
会上传 CSS 数据吗？
不会。换算在浏览器中完成。
rem 和 em 的区别是什么？
rem 通常基于根元素字号，em 基于当前元素或上下文的字号。嵌套组件里 em 的结果更容易随上下文变化。
px 转 rem 后为什么页面看起来还是不对？
换算只解决数值关系，真实效果还受 root font-size、媒体查询、容器宽度和浏览器缩放影响。
推荐流程
前端样式调整流程
先换算单位，再生成响应式 CSS 和检查可访问性。