CSS“em”问题：避免缩放到特定元素的字体大小答案

【问题标题】：CSS "em" issue: avoid scalling to font-size of specific elementCSS“em”问题：避免缩放到特定元素的字体大小
【发布时间】：2014-01-24 12:43:59
【问题描述】：

我的网站几乎完全是用“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”中不是这种情况），它根据元素的字体大小缩放所有内容。

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

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

【问题讨论】：

标签： css layout fonts em

【解决方案1】：

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

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

【讨论】：

嗨，Haroldchen。你会推荐使用“rem”还是它过于具体和禁止进入？我可以在这里看到caniuse.com/rem 有 82% 的兼容性，而 100% 的“em”...
这真的取决于你的目标是什么。 IE8 和 OperaMini 是这里的真正问题。你可以为这两个浏览器填充（github.com/chuckcarpenter/REM-unit-polyfill）。或者，您每次重新定义字体大小时都会调整 em 单位。就我个人而言，我的大多数项目都使用 em 来根据需要调整 em 值。

【解决方案2】：

就个人而言，我将我的“主单元”设置在身体中，并以 10 的倍数进行。我讨厌 16pt 作为库存，因为我不想使用图表将我的字体大小设置为我想要的大小。

body { font-size:10pt; }

就特定元素而言，请记住，如果您有一个大小为 1.2em 的元素（例如 ul），并且 li 设置为 1.0，而您的主体为 @987654326 @，那么 li 实际上基于它的父容器，所以它将是 1.2em 而不是 1.0（又名 10pt 在正文中设置），因为它是父母是1.2em。

如果您想要一个特定大小的东西（例如主菜单），我建议您放弃该特定父对象（或li 本身）上的em 方法并使用一组@987654334 @ 或 pt 方法。

【讨论】：