0

我的 HTML 如下所示：

body {
font-size: 75%;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

我的 CSS 看起来像这样：

header .logo {
    text-align:center;
    line-height: 6rem;
    font-size: 4rem;
    font-weight: bold;
    font-family: "Segoe UI Web Light", "Segoe UI Light", "Segoe UI Web Regular", "Segoe UI", "Segoe UI Symbol", "Helvetica Neue", Arial;
}

当我将行高指定为 6rem 时，它在 Chrome 开发人员工具中显示为 96px。谁能告诉我 rem 中的设置会忽略正文字体大小设置吗？

我的目标是 IE9 及更高版本，所以现在使用 rem 是一个好主意，还是应该等一年后再使用 rem 进行未来设计？

4

1 回答 1

3

因为根元素不是body，它是html。由于您实际上并没有修改根元素的字体大小，因此 1 rem 仍然等于默认字体大小 16px，因此 6 rem 是 96px。

要纠正此问题，您只需更改选择器：

html {
font-size: 75%;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

现在 6 rems 应该正确计算为 72px（16px 的 75% 的 6 倍）。

于 2013-10-08T08:54:03.317 回答