CSS如何正确使用ems而不是像素？ [英] CSS How to Properly use ems instead of pixels?

问题描述

我想尝试将我的设计从像素转换为ems。

I'd like to try and convert my designs from pixels to ems. I've read so many tutorials that... and I'll leave it right there.

以这个为基础开始：

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

...现在这是我失去的地方...

... now this is where I get lost...

我应该像这样定义 font-size ：

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

...或类似：

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

然后接下来我真的不明白是ELSE应该使用ems除了 font-size 和 line-height ？我将使用 960.gs 使用固定宽度的布局。

And then the next thing I don't really understand is where ELSE should I be using ems in addition to font-size and line-height? I will be using a fixed-width layout using 960.gs.

推荐答案

line-height: 1.4em;

可能不是你想要的。即使在后代元素上更改字体大小，行高也将保持在该元素的大小相同的计算高度。

Probably isn't what you want. The line-height will stay at the same computed height for the size of an ‘em’ on that element, even when you change the font-size on a descendant element.

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

line-height has a special case where it allows a unitless number:

line-height: 1.4;

这使得每个后代line-height取决于自己的字体大小而不是祖先的。 p>

Which makes each descendant line-height depend on its own font-size rather than the ancestor's.

我应该定义我的font-size [在包装器上还是在许多元素类型上]？

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

这取决于你想要做什么。对于相对字体大小，通常最好将声明数量降至最小，因为它们嵌套：也就是说，使用 blockquote {font-size：1.5em; } ，如果你把一个blockquote里面一个块引用，你会得到一个1.5 * 1.5 = 2.25em的字体大小相比身体字体大小。那是你要的吗？也许也许不是。

Well that rather depends on what you're trying to do. With relative font-sizes it is generally best to keep the number of declarations down to a minimum, because they nest: that is, with your blockquote { font-size: 1.5em; }, if you put a blockquote inside a blockquote you'd get a font-size of 1.5*1.5=2.25em compared to the body font size. Is that what you want? Maybe, maybe not.

其中ELSE应该使用ems

where ELSE should I be using ems

在任何地方，您希望元素的大小能够响应用户喜欢的字体大小。一个常见的例子是：

Anywhere you want the size of an element to respond to the user's preferred font-size. One common example would be something like:

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

尝试在进行液体布局时将文本行限制为合理的列宽。

to try to restrict text lines to a reasonable column width when doing liquid layout.

但是如果你限制自己使用固定宽度的布局，那么使元素宽度依赖于font-size是没有意义的。

But if you are limiting yourself to a fixed-width layout it may not make sense to make element widths font-size-dependent.

这篇关于CSS如何正确使用ems而不是像素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！