我的网站几乎完全是用“em”(而不是 px)设计的。它对于现代浏览器来说应该要好得多。
大部分文本的字体大小为: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”中不是这种情况)，它根据元素的字体大小缩放所有内容。
这个例子很简单；但在我的网站上，我很难保持事情的一致性。
如何停用此属性，以便在上面的示例中两个按钮具有相同的边距？ (无需重新计算尺寸；这就是我现在正在做的!)
最佳答案
em单位的目的是相对于当前设置的字体大小。如果您想使用一致的 em 形式，请使用单位“rem”。它与页面的根元素(很可能是 html 标签)相关，代表 root em。
如果您想了解更多信息，请查看 Jonathan Snook 的这篇文章。 http://snook.ca/archives/html_and_css/font-size-with-rem
关于CSS "em"问题 : avoid scaling to font-size of specific element，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21333067/