2

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

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

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

4

2 回答 2

3

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

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

于 2014-01-24T12:57:13.397 回答
0

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

body { font-size:10pt; }

至于特定元素，请记住，如果您有ul一个大小为 的元素（例如 a ）1.2em，并且li设置为1.0，并且您的 body 为10pt，那么li实际上它是基于它的父容器，所以它会1.2em代替1.0（又名10pt在正文中设置），因为它的父级是1.2em.

如果你有一些你想要一个特定大小的东西（比如一个主菜单），我建议你放弃em那个特定父对象（或li它们自己）的方法并使用一个集合px或pt方法。

于 2014-01-24T12:55:03.777 回答