无单位line-height转百分比计算异常，求正确转换方法

哈哈，这个问题其实是踩了line-height不同单位计算逻辑的坑，我来给你掰扯清楚～

首先得明确line-height不同取值的核心计算规则，这是你搞混的关键：

• 无单位数值（如1.2）：这是当前元素font-size的倍数。计算时直接用元素自身的字体大小乘以这个倍数，比如你的<h1>设置font-size:36px，那行高就是36px × 1.2 = 43.2px，和你用Firefox开发者工具看到的一致。而且这种取值的好处是，子元素会继承这个倍数，子元素会用自己的font-size再乘这个倍数，适配性很强。

• 百分比值（如120%）：划重点！百分比是**相对于当前元素自身的font-size**来计算的，不是浏览器默认的16px！你之前的错误就在这里：你把计算出的43.2px和默认的16px对比，算出了270%，但这完全搞错了参照对象。正确的计算应该是用行高像素值除以元素自身的font-size再转成百分比：(43.2px ÷ 36px) × 100% = 120%。当你设置line-height:120%时，计算出来的行高就是36px × 1.2 = 43.2px，自然和无单位1.2的显示效果完全一致。

• 固定像素值（如43.2px）：就是固定的行高数值，和前两者计算后的结果一致，所以显示效果相同。但像素值是固定的，子元素继承的就是这个固定值，不像无单位数值那样能自适应子元素的字体大小。

简单来说，你之前的计算逻辑错误地把百分比的参照对象当成了浏览器默认的16px，但实际上百分比line-height的参照是当前元素自己的font-size，所以用行高像素值除以元素自身的字体大小，再转成百分比，才是正确的对应值。

内容的提问来源于stack exchange，提问作者Sachin