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

Question

深入到一个项目中，我们在字体大小中使用 em 时遇到了问题。我们有几个标记模块，我们在不同的上下文中重用它们。在不同的上下文中，计算出的字体大小不同，因此经常头疼。使用 em 对我们很重要，因为我们使用的是响应式设计。所以字体大小的可伸缩性是必须的。请参阅jsFiddle一个简单的示例。 我们怎样才能保持字体的放大和缩小，但使它不那么上下文敏感？

Answer 1

听起来您正在寻找 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。

Answer 2

继承可能很烦人，尤其是在使用 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)
}

这是更新的示例。