PX与EM单位换算

先明确：EM 不是固定的像素值

这个换算器处理 CSS 中的 px 与 em，支持从任意一侧输入并同步得到另一侧结果。px 是 CSS 的绝对长度单位；em 是字体相对长度，必须结合一个以像素表示的字体大小才能得到确定的数值。因此，“1em 等于多少 px”没有脱离上下文的唯一答案。页面预设的基准像素是 16px，这只是工具的初始计算值，不代表所有元素都固定采用 16px。

换算公式与基准像素

设目标像素值为 P，当前 CSS 上下文中 1em 对应的字体大小为 B（单位 px），换算结果为 E（单位 em）：

例如基准为 16px 时，24px ÷ 16px = 1.5em；反向计算时，1.5em × 16px = 24px。基准改为 20px 后，同一个 24px 则是 1.2em。可见公式本身很简单，真正影响结果的是有没有选对 B。

基准应跟着 CSS 属性走

按照 CSS 规范，em 通常等于使用它的元素的计算字体大小；但当 em 用在 font-size 等字体属性上时，它按父元素的计算字体度量解析。于是，给子元素写 font-size: 1.25em 时，应把父元素的计算字号填入“基准像素”；给同一元素写 padding: 1em 或 margin: 1em 时，应以该元素自身的计算字号为基准。rem 则始终以根元素为参照，不能把两者在所有场景中当成同一种换算。

规范依据与核验范围

从实际样式中取得正确基准

1. 确认要转换的 CSS 属性

   先判断数值将用于 font-size，还是用于 padding、margin、宽高等其他属性。这个选择决定应查看父元素还是当前元素的计算字号。

2. 读取计算后的字体大小

   在浏览器开发者工具的“计算样式”中查看对应元素的最终 font-size，不要只看某一条声明。继承、层叠和上级字号都可能改变最终基准。

3. 填写基准并选择输入方向

   把计算字号填入“基准像素”。从设计稿转换时在 PX 一侧输入；阅读已有样式或反查像素值时在 EM 一侧输入。另一侧会立即更新。

4. 复制并在目标上下文复核

   复制所需数值应用到样式后，再查看计算样式是否得到预期像素值。重置会恢复 16px 基准、16px 输入和 1em 结果。

正向、反向与改基准示例

任务	输入	基准	结果
设计稿字号转 EM	14px	16px	0.875em
组件间距转 EM	24px	20px	1.2em
已有 EM 反查 PX	1.25em	18px	22.5px

修改基准像素时，工具会保留当前 PX 数值并重新计算 EM。页面还提供 8、12、14、16、18、20、24、32、48、64px 的快捷对照项；它们会随当前基准变化，点击任一项即可把该 PX 值带入主换算区。

PX 与 EM 的常见疑问

1em 一定等于 16px 吗？

不一定。16px 是本工具的预设基准；实际的 1em 取决于该单位所在 CSS 属性对应的计算字体大小。基准为 18px 时，1em 就按 18px 换算。

为什么工具结果与浏览器里的像素值不同？

通常是基准没有使用最终计算字号。检查目标属性、父子关系、继承与层叠后的 font-size，再把正确的像素值设为基准；还要留意工具显示舍入与浏览器内部精度的差别。

嵌套元素使用 em，字号为什么会逐层变化？

因为子元素继承的是父元素已经计算后的字号。若起点为 16px，父元素和子元素都写 font-size: 1.25em，两层计算依次为 20px 和 25px，而不是都等于 20px。

什么时候更适合改用 rem？

需要所有层级统一参照根元素时，rem 更直接；需要一个组件的字号、间距和尺寸随组件自身比例缩放时，em 更合适。选择取决于希望尺寸跟随局部上下文还是全局根字号。

显示精度与适用边界

• 主输入区的换算结果最多显示 4 位小数，快捷对照项最多显示 3 位小数，并会去掉末尾无意义的零。复制的是当前显示值；需要更高精度时，应保留原始公式自行计算。
• 基准像素应填写正数。留空或填 0 时，工具按 16px 计算；无法解析的 PX 或 EM 输入会清空另一侧结果。负数能够参与纯算术，但某个 CSS 属性是否允许负长度，应以该属性的语法和取值范围为准。
• 换算器只根据输入数值做比例计算，不会读取样式表、判断层叠结果或替用户选择父元素。应用结果前仍需在目标页面中核对计算样式。
• CSS 的 px 是参考像素体系中的单位，不应直接理解为屏幕上的单个硬件像素；设备像素密度不会改变这里使用的 PX/EM 比例公式。