PX 转 EM 转换器
本工具可将像素（px）值转换为 CSS 中的 em 单位。与 rem 不同，em 单位相对于元素自身（或最近）父元素的 font-size，因此换算结果始终取决于你放置它的上下文。请将基准字号设置为与你实际的父元素一致，输入一个像素值，等价的 em 便会即时显示，可直接复制到样式表中。
16px = 1em。请在设置中调整基准字号，使其与该值实际使用的父元素上下文相符。何时使用 EM
组件级尺寸
自适应间距
排版节奏
如何将 PX 转换为 EM
设置父元素字号
在基准字号字段中输入父元素的 font-size（默认 16px）。每个 em 结果都按此值计算。
输入像素值
确保已选中 px 单位标签，然后输入要转换的像素值。em 等价值会随输入实时更新。
读取结果
em 值会即时出现在结果面板中，并附带 rem 和 px 等价值便于快速对比。可调整小数位数以满足所需精度。
复制到你的 CSS
点击 em 结果旁的复制按钮，直接粘贴到样式表中，无需手动除法。
em = px ÷ 父元素字号。例如，24px ÷ 16px = 1.5em。EM 与 REM：弄清区别
两者都是相对单位，但参照对象不同。关键区别在于叠加效应：em 值会在元素嵌套时层层叠加，而 rem 始终指向根元素。
相对于父元素
- 基于最近父元素的 font-size
- 在嵌套元素间会叠加
- 适合自包含的组件
- 上下文会改变计算值
相对于根元素
- 基于根（html）字号
- 从不叠加——始终可预测
- 适合全局布局与排版
- 整个页面取值一致
1.25em，子元素也使用 1.25em，那么子元素会渲染为 1.25 × 1.25 ≈ 1.56 倍祖父元素的大小。请始终确认你的 em 值是相对于哪个父元素上下文解析的。常见 PX 转 EM 换算
以下参考值假设父元素为 16px。在工具中更改基准即可为其他任意上下文重新计算。
| 像素 | EM（父元素 16px） | 典型用途 |
|---|---|---|
| 12px | 0.75em | 说明文字、小字 |
| 14px | 0.875em | 次要文字、标签 |
| 16px | 1em | 正文基准 |
| 20px | 1.25em | 导语段、小标题 |
| 24px | 1.5em | 分节标题 |
| 32px | 2em | 页面标题 |
常见问题
本工具中的父元素字号到底指什么？
它指你的 em 值所相对的那个元素的 font-size。浏览器会基于最近祖先的 font-size 来计算 em，所以请将此字段设为该父元素在你真实 CSS 中渲染出的值。默认 16px 与浏览器对 body 的常见默认值一致。
px 是如何转换为 em 的？
用像素值除以父元素字号：em = px ÷ 父元素。父元素为 16px 时，24px 即为 1.5em。本工具会即时计算，并允许你控制显示的小数位数。
我应该用 em 还是 rem？
当你希望尺寸随本地组件缩放时使用 em，例如内边距随按钮文字增长。需要整页统一可预测取值的全局布局与排版时使用 rem。许多设计会同时使用两者。
为什么嵌套时我的 em 值好像被放大了？
这就是叠加效应。由于每个 em 都相对于其父元素，嵌套那些各自以 em 设置 font-size 的元素会使效果相乘。如果你需要无论嵌套多深都保持恒定的值，请改用 rem。
转换是在我的浏览器中完成的吗？
是的。计算完全在客户端随输入进行。没有任何数据发送到服务器，因此响应即时，页面加载后即可离线使用。
还没有评论，快来发表第一条！