Css 我们如何保持字体的上下缩放，但又不使其对上下文敏感？

深入到一个项目中，我们在字体大小中使用em时遇到了问题。 我们有几个标记模块，可以在不同的上下文中重用。 在不同的上下文中，计算出的字体大小不同，导致持续头痛。 使用em对我们很重要，因为我们使用的是响应性设计。所以字体大小的可伸缩性是必须具备的。请参阅以获取一个简单的示例。

---

我们如何保持字体的放大和缩小，但又不使其对上下文敏感？

继承可能非常烦人，尤其是在使用ems时。正如你所知道的，由于类名，你应该能够通过应用一些简单的数学来解决这个问题

让我们以

.context1

中的所有内容为理想，您的CSS当前看起来像：

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

在您的情况下，第一个标题将是

3em

，第二个标题实际上是

4.5em

，因为父项被定义为大1.5x。要解决此问题，您可以执行以下操作：

.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)
}

---

.

听起来你在找rem装置

---

浏览器支持相当不错（请参阅）。唯一不支持它的主流浏览器是IE8。

问题的一部分是在body元素上使用62.5%的魔法字体大小来简化数学，这会导致各种继承问题（请参阅：）。

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