CSS "em"问题：避免缩放到特定元素的字体大小

Question

我的网站几乎完全是在" em quot"中设计的。（而不是PX）。对于现代浏览器来说应该更好。

大多数文本是字体大小：1em。1em =默认情况下，我没有指定它。

但是我有一些内容，其中字体大小为1.2em，而其他为0.8em（例如，对于H1或小按钮）。

" em quot"的问题是根据字体大小重新缩放元素的所有尺寸（边距，填充，高度...）。

我在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 quot"属性（在" px"中不是这种情况），它根据元素的字体大小来缩放所有内容。

这个示例很简单；但是在我的网站上，这确实使我很难保持一致。

如何将此属性解散，以便在上面的示例中具有相同的边距？（不重新计算大小；这是我现在正在做的！）

Answer 1

它是EM单元的目的，它与当前设置的字体大小相对。如果要使用EM的一致形式，请使用" REM"单元。它相对于页面的根元素（最有可能是您的HTML标签），并且代表root em。

如果您想了解更多有关它的信息，请查看乔纳森·斯诺克（Jonathan Snook）的这篇文章。http://snook.ca/archives/html_and_css/font-size-with-rem

Answer 2

就个人而言，我将"主单元"设置在体内，并以10s的倍数进行。我讨厌16pt作为库存，因为我不想使用图表来设置我想要的字体尺寸。

body { font-size:10pt; }

至于特定的元素，请记住，如果您的元素（例如ul）具有1.2em的大小，并且将li设置为1.0，并且您的身体是10pt，则li实际上是基于 OFF的是父容器，因此它将是1.2em，而不是1.0（又称10pt为正体内设置），因为它是 parent 是1.2em。

如果您在整个过程中都需要特定尺寸（例如主菜单），我建议您放弃该特定父对象（或li本身）上的em方法，并使用SET px或pt方法。