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

Here's the updated the example

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。

我们如何保持字体按比例放大和缩小，但不要让它对上下文敏感？

2 个答案: