CSS 如何正确使用 ems 而不是像素？

Question

我想尝试将我的设计从像素转换为 em。我已经阅读了如此多的教程……我会把它留在那里。

以此为基础:

body {
    font-size: 62.5%;
    line-height: 1.4;
}

...现在这就是我迷路的地方...

我应该像这样定义我的font-size吗:

div#wrapper { font-size: 1.5em; }

...或者像这样:

blockquote, li, p, dt, dd, etc { font-size: 1.5em }

接下来我不太明白的是，除了 font-size 和 line-height 之外，我还应该在哪里使用 em？我将使用固定宽度的布局 960.gs .

Answer 1

line-height: 1.4em;

可能不是您想要的。对于该元素上的“em”大小，行高将保持相同的计算高度，即使您更改后代元素上的字体大小也是如此。

line-height 有一个特殊情况，它允许一个无单位的数字:

line-height: 1.4;

这使得每个后代的行高取决于它自己的字体大小，而不是祖先的。

Should I be defining my font-size [on a wrapper or on many element types]?

好吧，这取决于您要尝试做什么。对于相对字体大小，通常最好将声明的数量保持在最低限度，因为它们嵌套:也就是说，与您的 blockquote { font-size: 1.5em; }，如果你把一个 blockquote 放在一个 blockquote 里面，你会得到一个 font-size 1.5*1.5=2.25em 与 body 字体大小相比。那是你要的吗？也许，也许不是。

where ELSE should I be using ems

任何您希望元素的大小响应用户首选字体大小的地方。一个常见的例子是这样的:

#maintext {
    width: 60%;
    min-width: 8em;
    max-width: 40em;
}

尝试在进行流式布局时将文本行限制在合理的列宽。

但如果您将自己限制在固定宽度的布局中，则使元素宽度与字体大小相关可能没有意义。