css - 为什么普遍应用时字体大小不可靠？

使用以下CSS:

* {
    margin: 0;
    padding: 0;
    font-family:"Segoe UI";
    font-variant: small-caps;
}
.red {
    color: hsl(0, 100%, 50%);
    font-size: 3em;
}
.orange {
    color: hsl(30, 100%, 50%);
    font-size: 3em;
}
.yellow {
    color: hsl(60, 100%, 50%);
    font-size: 3em;
}
.green {
    color: hsl(120, 100%, 50%);
    font-size: 3em;
}
.blue {
    color: hsl(210, 100%, 50%);
    font-size: 3em;
}
.indigo {
    color: hsl(230, 100%, 50%);
    font-size: 3em;
}
.violet {
    color: hsl(274, 100%, 50%);
    font-size: 3em;
}

...选择器中的属性可以正常工作-它们适用于所有类；但是，如果我在此处移动字体大小，则文本将增长到暴龙比例。您可以通过以下方式将字体大小从各个类移到*类来看到:http://jsfiddle.net/NvTvr/8/

为什么会这样？

更新

所以这是要走的路，然后:

* {
    margin: 0;
    padding: 0;
    font-family:"Segoe UI";
    font-variant: small-caps;
    font-size: 48px;
}
.red {
    color: hsl(0, 100%, 50%);
}

...等等。 (未在颜色类别中指定字体大小)；如http://jsfiddle.net/NvTvr/10/所示

最佳答案

因为em是相对于上下文的。

由于font-size是从上下文继承的，所以每个带有em的后代元素font-size会将当前font-size乘以包含文本内容的元素。

让我们在实践中看一下，假设:

* { font-size: 3em }

您正在将(相对于上下文)font-size应用于所有元素。

这意味着html元素将具有默认浏览器字体大小的3倍。 body的字体大小是其容器(html)的3倍，相当于默认字体大小的9倍。对于每个元素的祖先，依此类推。

有一个不存在此问题的新单元，rem相对于root。但这还没有得到广泛支持(不支持IE
答案的这一部分中的em x px x rem辩论有些偏离主题。

引用this answer:



现代浏览器可以很好地缩放px单位。 em通常在旧版IE占主导地位时使用，并且在缩放时不缩放px字体大小。

尽管如此，em仍在网页设计中使用它。说，当使CSS图标应该相对于文本的字体大小缩放时。但是对于整体布局，我使用rem / px，它们在进行流畅的布局时不会产生复合问题和麻烦，也不会产生百分比。

字体大小的px的问题在于，如果您需要更改页面文本的整体大小，则必须更改使用font-size的每个单个px声明。这就是rem提供帮助的地方。

关于font-size使用哪个单位，始终存在激烈的讨论。选择一个可以减轻您的项目头痛和烦恼的项目。

总之，这取决于个人喜好和项目要求。

参考文献:

定义和解释

CSS Length units-MDN

Why em instead of px?-SO问题

Font sizing with rem-Snook.ca

更多讨论

Should I use px or rem in my css?-SO问题(建议px用作font-size)

Why Ems?-CSS技巧(建议em用作font-size)