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

Question

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

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

我怎样才能找到导致这种情况发生的规则？问候

Answer 1

EM 不是固定的测量单位，它是相对大小。 “EM”的起源实际上是特定字体中字母“M”的宽度。在数字排版中，EM 是相对于基本字体大小的。因此，您所看到的是 CSS 的“级联”特性的例证。

最初加载时，基本字体设置为百分比或固定大小(例如:12px、14px、100% 等)然后，当加载其他样式时，您的字体的大小#TP_splash_screen 继承自被更改为更小的内容，因此 6em 值现在更小了。

考虑这个例子:

body{
    font-size: 12px;
}

#TP_splash_screen{
    font-size: 6em;
}

.container{
    font-size: 10px;
}

如果您使用 #TP_splash_screen 作为 body 元素的直接子元素，那么您的字体将为 6em of 12px(6 倍于 a 12 像素“M”)。如果您使用 #TP_splash_screen 作为 container 元素的子元素，那么您的字体将为 6em of 10px(6 倍于 10px“M”的大小).

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