我们如何保持字体的放大和缩小，但使其不那么上下文相关

Question

深入到一个项目中，我们在字体大小中使用em时遇到了问题。我们有几个标记模块，我们可以在不同的上下文中重用。不断的头部疼痛，计算的字体大小在不同的上下文中是不同的。使用 em 对我们来说很重要，因为我们使用的是响应式设计。因此，字体大小的可扩展性是必须具备的。请参阅 jsFiddle 获取一个简单的示例。我们如何保持字体的放大和缩小，但使其不那么上下文相关？

Answer 1

继承可能非常烦人，尤其是在使用 ems 时。由于类名，您知道上下文，您应该能够通过应用一些简单的数学来克服这个问题。

让我们以.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)
}

下面是更新的示例。

Answer 2

听起来您正在寻找 rem 单元。

http://jsfiddle.net/6YC89/1/

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

浏览器支持相当不错（请参阅：http://caniuse.com/#feat=rem）。 唯一不支持它的主要浏览器是IE8。