Question

我的网站几乎完全是用“em”设计的（而不是px）。它应该对现代浏览器更好。

大部分文字都是font-size：1em。 1em = 16px默认情况下，我没有指定它。

但是我有一些内容，其中font-size是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形式，请使用单位＆＃39; rem＆＃39;。它与页面的根元素相关（很可能是您的html标记）并代表root em。

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

Answer 2

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

body { font-size:10pt; }

就特定元素而言，请注意，如果您有一个大小为ul的元素（例如1.2em），并且li设置为1.0 }，并且您的正文为10pt，然后li实际上是基于关闭它的父容器，因此它将是1.2em而不是1.0 （在身体中设置为10pt），因为它的父是1.2em。

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

CSS＆＃34;＆＃34;问题：避免缩放到特定元素的字体大小

2 个答案: