CSS单位换算（px/em/rem）

← ToolBox / CSS单位换算

🔄 CSS Unit Converter (px / em / rem / pt / %)

Convert between CSS length units.

📐 工作原理与说明
在 px、em、rem 等 CSS 长度单位之间换算，相对单位依赖基准字号。
  • px：CSS 参考像素，约等于 1/96 英寸，是绝对基准。
  • em：相对父元素的 font-size，嵌套层级深时会产生复合放大。
  • rem：相对根元素（html）的 font-size，默认 16px 时 1rem = 16px，避免复合问题。
  • 其他：% 相对父级，vw/vh 相对视口的 1%，ch 为字符 0 的宽度，ex 为小写 x 的高度。

实时预览（当前 px 值）：

示例文字
📌 换算关系

📚 深度解析：CSS 单位换算（px / em / rem / pt / %）

💡 常见使用场景

换算
根字号 16px：2rem=32px；父字号 14px：1.5em=21px；12pt≈16px。

❓ 常见问题（FAQ）

em 与 rem 区别？
em 相对父元素字号，rem 相对根(html)字号。
em 和 rem 有什么坑？
rem 恒等于根元素字号，可预测；em 相对父元素字号，嵌套多层会逐级相乘——三层嵌套且每层 1.2em 时，实际是 1.728 倍而非 1.6 倍。因此字号建议统一用 rem，只有需要跟随局部上下文缩放的属性（如按钮内边距）才用 em。

📊 结果解读

单位关系

CSS 长度：px 绝对像素；em 相对父字体大小；rem 相对根（html）字体大小；pt 印刷点（1pt=1/72in）；% 相对父尺寸。无父上下文时 % 可能无效。

用途

响应式排版优先用 rem/em 实现可缩放；px 适合固定边框。1rem 默认 = 16px。

注意

em 会层层累积，嵌套深时需谨慎；结果以当前根/父字体设置为准。