CSS "em"问题 : avoid scaling to font-size of specific element

Question

我的网站几乎完全是用“em”(而不是 px)设计的。对于现代浏览器来说，它应该会好得多。

大部分文本是 font-size:1em。默认1em = 16px，我没有指定。

但我有一些内容的字体大小为 1.2em，而其他内容为 0.8em(例如 H1 或小按钮)。

“em”的问题在于它会根据字体大小重新缩放元素的所有大小(边距、填充、高度...)。

我的 CSS 中有特定代码:

/* Reset */
html [and many other elements] {
    font-size: 100%;
    font: inherit;
}
/* Design */
body {
    font-size: 1em;
    line-height: 1; /* Line height will equal the em of each element */
}
.small-button {
    font-size: 0.8em;
    margin-left: 1em;
}
.normal-button {
    font-size: 1em;
    margin-left: 1em;
}

普通按钮的边距为 1x1x16 = 16px。但是小按钮的边距为 1x0.8x16 = 12.8px。

显然这是一个特定的“em”属性(在“px”中不是这种情况)，它根据元素的字体大小缩放所有内容。

这个例子很简单；但在我的网站上，这让我很难保持一致。

如何取消激活此属性，以便在上面的示例中 2 个按钮具有相同的边距？ (无需重新计算尺寸；这就是我现在正在做的!)

Answer 1

em单位的作用是相对于当前设置的字体大小。如果要使用一致形式的 em，请使用单位“rem”。它与您页面的根元素(很可能是您的 html 标记)相关，代表 root em。

如果您想了解更多信息，请查看 Jonathan Snook 撰写的这篇文章。 http://snook.ca/archives/html_and_css/font-size-with-rem