em单位的像素值取决于父元素font-size，若父元素未设置则回退至浏览器默认16px；显式修改父元素字号会动态改变em基准；推荐用rem或重置根字号提升可控性。
如果您在编写CSS样式时遇到字体尺寸设置困惑，例如将font-size: 1.5em写入样式却无法准确预估其像素值，则问题往往源于对em单位计算基准的理解偏差。以下是关于em与px换算关系的详细说明：
一、em的基准由父元素font-size决定
em是相对长度单位，其实际像素值并非固定，而是动态继承并依赖于**当前元素的直接父元素所声明的font-size值**。若父元素未显式设置font-size，则逐级向上继承，最终回退至浏览器默认根字号。
1、检查目标元素的父容器是否设置了font-size属性。
2、若父容器设置为font-size: 20px，则该元素内1em = 20px。
立即学习“前端免费学习笔记（深入）”；
3、若父容器设置为font-size: 14px，则该元素内1em = 14px。
4、若所有祖先均未设置且无CSS重置，浏览器默认根字号为16px，此时1em = 16px。
二、浏览器默认行为下的标准换算
在未通过CSS修改任何font-size的前提下，现代主流浏览器（Chrome、Firefox、Edge、Safari）均以16px作为根元素（或）的默认字体大小，因此子元素在无覆盖设置时遵循此基准。
1、1em 对应 16px。
2、0.75em 等于 12px（16 × 0.75 = 12）。
3、2.5em 等于 40px（16 × 2.5 = 40）。
4、反向换算：将px值转换为em，需用px数除以父元素font-size值，例如24px在默认环境下写作1.5em（24 ÷ 16 = 1.5）。
三、父元素font-size被显式修改时的动态计算
当父容器应用了自定义font-size（如font-size: 18px），其所有使用em声明尺寸的子元素都将以此值为新基准，不再参考浏览器默认的16px。
1、父元素设置font-size: 18px，子元素写font-size: 1.2em → 实际为21.6px（18 × 1.2）。
2、若子元素自身再设font-size: 0.9em，则该子元素的“1em”等于其父元素的18px，而它自己的字号为16.2px（18 × 0.9）。
3、嵌套三层且每层font-size均不同：外层20px → 中层0.8em（16px）→ 内层1.5em → 最终为24px（16 × 1.5）。
4、验证方式：在浏览器开发者工具中选中元素，查看Computed面板中的font-size行，其显示值即为最终生效的px数值。
四、避免继承干扰的常用实践
为规避多层嵌套导致em值难以追踪的问题，开发者常采用隔离策略，使em计算基准明确可控，而非隐式依赖未知祖先值。
1、在CSS重置或基础样式中为html元素统一设定font-size: 62.5%，使1em = 10px（因默认16px × 62.5% = 10px），便于后续用em表达整十像素值。
2、对需要精确控制的模块，使用font-size: 1rem替代font-size: 1em，确保始终基于根元素字号，不受局部父级影响。
3、在关键组件容器上强制设置font-size: 16px，切断深层继承链，使内部em计算回归标准基准。
4、禁用用户缩放干扰：添加html { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }，防止移动端系统缩放破坏em预期表现。
五、常见误判场景与修正方法
实际开发中，em值与预期不符常非单位本身错误，而是因CSS层叠、继承优先级或重置规则引发的隐性覆盖，需针对性排查。
1、检查是否存在全局CSS框架（如Bootstrap）重置了html或body的font-size，导致基准偏移。
2、确认是否在媒体查询中针对特定屏幕宽度修改了根字号，造成响应式断点处em值突变。
3、审查是否有JavaScript动态修改了父元素style.fontsize，从而实时改变子元素em解析结果。
4、使用getComputedStyle(element).fontSize在控制台中直接读取运行时计算出的px值，绕过CSS源码推测，获取真实渲染结果。
