CSS单位换算（px/em/rem）
CSS单位换算（px / em / rem / pt / %）
🔄 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 值）：
示例文字📌 换算关系
- em / rem：目标 px ÷ 基准 px（例如 16px / 16px = 1rem）。
- pt：1px = 0.75pt，因此 16px = 12pt。
- 百分比（%）：以基准字号为 100%，16px 对应 100%。
- 浏览器默认根字号通常为 16px。
📚 深度解析：CSS 单位换算（px / em / rem / pt / %）
💡 常见使用场景
- 按根字号把 rem 转 px，或按父字号把 em 转 px。
- 响应式改造：把设计稿里的固定 px 按根字号换算成 rem，用户调整浏览器默认字号时整站才会跟着缩放，兼顾可访问性。
换算
根字号 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 会层层累积，嵌套深时需谨慎；结果以当前根/父字体设置为准。