css - 我们怎样才能使字体保持放大和缩小但又不那么上下文敏感？

Question

深入到一个元素中，我们遇到了在我们的字体大小中使用 em 的问题。我们有几个标记模块，我们在不同的上下文中重复使用。计算出的字体大小在不同的上下文中是不同的，这让我很头疼。使用 em 对我们很重要，因为我们正在使用响应式设计。所以字体大小的可伸缩性是必须的。请参阅 jsFiddle 的简单示例。我们如何让字体保持放大和缩小的同时又不那么上下文敏感？

Answer 1

继承可能会很烦人，尤其是在使用 em 时。正如您通过类名了解上下文一样，您应该能够通过应用一些简单的数学来解决这个问题。

让我们以 .context1 中的所有内容为理想情况，您的 CSS 目前如下所示:

.context1 {
    font-size: 1em;
}
.context2 {
    font-size: 1.5em;
}
.my-font-size {
    font-size: 3em;
}

在您的例子中，第一个标题将是 3em，第二个实际上是 4.5em，因为父级被定义为大 1.5 倍。要解决此问题，您可以执行以下操作:

.context1 {
    font-size: 1em;    //default font size for .context1
}
.context2 {
    font-size: 1.5em;  //default font size for .context2
}
.my-font-size {
    font-size: 3em;    //default font size for .my-font-size
}
.context2 .my-font-size {
    font-size: 2em;    //adjust the font size for the parent's value (3/1.5)
}

同样，您可以定义它，使 .context2 成为标准:

.context1 .my-font-size {
    font-size: 4.5em;    //(3 * 1.5)
}

Here's the updated the example .