相同元素在不同加载点上具有不同的像素大小

Question

我很难猜测为什么一个元素具有不同的像素大小，具体取决于加载的规则集。显然，该元素始终具有相同的字体大小 6em ，其被转换为96px的高度。但是在加载了一些其他规则后，相同的font-size被转换为86px的高度。以下是计算样式的两个快照：

加载页面时的字体大小 页面完全加载时的字体大小

如何追踪实现这一目标的规则？ 此致

Answer 1

EM不是固定的测量单位，而是相对大小。 “EM”的原点字面意思是特定字体中字母“M”的宽度。在数字排版中，EM与基本字体大小有关。所以，你所看到的是CSS的“级联”性质的例证。

最初加载时，基本字体设置为百分比或固定大小（例如：12px，14px，100％等）然后，当加载其他样式时，{{1}的字体大小继承自被改变为更小的东西，所以6em值现在变小了。

考虑这个例子：

#TP_splash_screen

如果您使用body{ font-size: 12px; } #TP_splash_screen{ font-size: 6em; } .container{ font-size: 10px; } 作为#TP_splash_screen元素的直接子元素，那么您的字体将是6p的12px（12px“M”的6倍）。如果您使用body作为#TP_splash_screen元素的子元素，那么您的字体将是6em的10px（大小为10px“M”的6倍）。

EM是处理灵活，响应式布局的理想测量单位，它们不是固定的度量单位。