怎么用?
- 先设根字号(默认 16px,即浏览器默认值)。
- 在 px 或 rem 任一框输入,另一框实时联动。
- 下方常用对照表列出 12–64px 的 rem 值,可逐行复制。
换算公式
rem = px ÷ 根字号,px = rem × 根字号。
根字号默认 16px,所以 16px = 1rem、24px = 1.5rem。
em 与 rem 公式相同,区别在参照物:rem 参照 html 根字号,em 参照当前元素继承字号。
什么时候用 rem / em / px?
- rem:全站字号、间距体系——一处改根字号即可整体缩放,利于可访问性。
- em:组件内部按自身字号缩放的场景(如按钮 padding 随字号变)。
- px:需要精确固定的场景(边框 1px、细线、图标对齐)。
关于 chdh.me 在线工具
本工具是 出海导航 chdh.me 免费在线工具集的一员, 同类还有 CSS 渐变生成器、 CSS box-shadow 生成器、 键盘按键值 keycode,均纯前端运行、不上传、不追踪。