提问人:Jeff 提问时间:10/12/2009 最后编辑:Jeff 更新时间:10/13/2009 访问量:7103
CSS 如何正确使用 ems 而不是像素?
CSS How to Properly use ems instead of pixels?
问:
我想尝试将我的设计从像素转换为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.gs。font-size
line-height
答:
em 的问题在于它是一个相对单位。继承和相对论在 HTML 文档中不能很好地混合在一起。我所做的是使用 px 作为字体大小和框尺寸/定位,但尝试将 em 用于行高、边距/填充等......
我敢肯定这不是“正确”的方法,但如果你问我,这个系统从一开始就设计得很差。
ems
是相对的,所以如果你设置:
body {
font-size: .6em;
}
一切都将与此相关。
这意味着(这也是我的头开始受伤的地方)如果 h1 的默认字体大小比大多数其他文本 (, ) 大 250%,则标题现在将是该默认大小的 60%。因此,它仍然会比其他东西大 2.5 倍,但它会比你根本没有设置规则时小 60%。p
li
现在,如果你这么说:
h1 {
font-size: 1.2em;
}
h1 现在将比未设置规则时大 20%,因此它比已经缩小的比第一条规则小 60% 大 20%。这意味着它将不再与浏览器对 h1 和其他元素的默认值成正比。
所以基本上,你应该为整个文档预先设置字体大小(就像我展示的第一条规则一样),这是你的基线。之后,您可以设置如何根据彼此之间的关系调整任何单个元素的大小(基本上与它们已经存在的关系)......
因此,如果您知道您希望 #wrapper div 中的所有字体都比其默认值低 1.5em,那么将其设置在那里是完美的。但是,如果您想更改 blockquote 的大小使其更小一点,您仍然可以为 #wrapper 设置规则,然后为 blockquote 设置第二个规则。
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;
}
尝试在进行液体布局时将文本行限制在合理的列宽。
但是,如果您将自己限制在固定宽度的布局中,那么使元素宽度与字体大小相关可能没有意义。
评论
您可能会发现如何使用 ems 调整文本大小是一本有趣且有用的读物。我试图记住的是我从 ems 到像素的转换。
在您的示例中:
body {
font-size: 62.5%;
line-height: 1.4em;
}
如果浏览器默认文本大小为 16px,则 1 em 等于 10 像素。然后,行高将等于 14 像素。就像 bobince 一样,我会使用一个无单位的值。line-height
为了帮助您进行计算,您可以使用 Em 计算器。它允许您轻松地在 ems 和像素之间进行转换。
评论
如果要使用 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 */
}
问候
评论