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

CSS How to Properly use ems instead of pixels?

提问人:Jeff 提问时间:10/12/2009 最后编辑:Jeff 更新时间:10/13/2009 访问量:7103

问:

我想尝试将我的设计从像素转换为ems。我读过很多教程......我会把它留在那里。

从这个开始作为我的基础:

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 }

然后我不太明白的下一件事是,除了 和 之外,我还应该在哪里使用 ems?我将使用固定宽度的布局 960.gsfont-sizeline-height

CSS的

评论

0赞 DisgruntledGoat 10/12/2009
我相信使用百分比比使用ems更好(即跨平台更可靠)。

答:

0赞 Chris 10/12/2009 #1

em 的问题在于它是一个相对单位。继承和相对论在 HTML 文档中不能很好地混合在一起。我所做的是使用 px 作为字体大小和框尺寸/定位,但尝试将 em 用于行高、边距/填充等......

我敢肯定这不是“正确”的方法,但如果你问我,这个系统从一开始就设计得很差。

0赞 Anthony 10/12/2009 #2

ems是相对的,所以如果你设置:

body {
    font-size: .6em;
}

一切都将与此相关。

这意味着(这也是我的头开始受伤的地方)如果 h1 的默认字体大小比大多数其他文本 (, ) 大 250%,则标题现在将是该默认大小的 60%。因此,它仍然会比其他东西大 2.5 倍,但它会比你根本没有设置规则时小 60%。pli

现在,如果你这么说:

h1 {
    font-size: 1.2em;
}

h1 现在将比未设置规则时大 20%,因此它比已经缩小的比第一条规则小 60% 大 20%。这意味着它将不再与浏览器对 h1 和其他元素的默认值成正比。

所以基本上,你应该为整个文档预先设置字体大小(就像我展示的第一条规则一样),这是你的基线。之后,您可以设置如何根据彼此之间的关系调整任何单个元素的大小(基本上与它们已经存在的关系)......

因此,如果您知道您希望 #wrapper div 中的所有字体都比其默认值低 1.5em,那么将其设置在那里是完美的。但是,如果您想更改 blockquote 的大小使其更小一点,您仍然可以为 #wrapper 设置规则,然后为 blockquote 设置第二个规则。

7赞 bobince 10/12/2009 #3
line-height: 1.4em;

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

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

line-height: 1.4;

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

我应该定义我的字体大小 [在包装器上还是在许多元素类型上]?

嗯,这取决于你想做什么。对于相对字体大小,通常最好将声明的数量保持在最低限度,因为它们嵌套:也就是说,对于你的 ,如果你在块引用中放置一个块引用,你会得到一个 1.5*1.5=2.25em 与正文字体大小相比。这是你想要的吗?也许,也许不是。blockquote { font-size: 1.5em; }

我应该在哪里使用 ems

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

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

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

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

评论

0赞 David 10/13/2009
关于线高信息的好花絮。我敢问,大多数浏览器都支持该功能吗?
0赞 bobince 10/13/2009
是的,在CSS所在的任何地方都支持基本的CSS1。
1赞 Zack The Human 10/13/2009 #4

您可能会发现如何使用 ems 调整文本大小是一本有趣且有用的读物。我试图记住的是我从 ems 到像素的转换。

在您的示例中:

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

如果浏览器默认文本大小为 16px,则 1 em 等于 10 像素。然后,行高将等于 14 像素。就像 bobince 一样,我会使用一个无单位的值。line-height

为了帮助您进行计算,您可以使用 Em 计算器。它允许您轻松地在 ems 和像素之间进行转换。

评论

1赞 knittl 10/13/2009
1em == 10px 仅当用户的默认字体大小为 16px 时,才需要 16px,但不必如此
0赞 Zack The Human 10/13/2009
没错,但开箱即用的大多数常用浏览器默认为 16px。如果你一开始只有一个相对大小(62.5%),你必须做出假设。
0赞 Arthur Ronald 10/13/2009 #5

如果要使用 em 设置页面宽度,请遵循 YUI 开发团队提供的此模式

将您想要的像素宽度除以 13;结果是所有非 IE 浏览器的 ems 中的宽度。对于 IE,将所需的像素除以 13.3333 以找到 IE 的 ems 中的宽度。

下面是一个自定义页面宽度为 600px 的示例,下面是 CSS 的样子:

600 px / 13 = 46.15(非 IE 浏览器)

600 px / 13.33 = 45.00(IE 浏览器)

#custom-doc { 
    margin:auto;text-align:left; /* leave unchanged */ 
    width:46.15em;/* non-IE */ 
    *width:45.00em;/* IE */ 
    min-width:600px;/* optional but recommended */ 
}   

问候