Question

我想尝试将我的设计从像素转换为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 }

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

Answer 1

line-height: 1.4em;

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

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

line-height: 1.4;

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

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

那相当取决于你想要做什么。对于相对字体大小，通常最好将声明的数量保持在最小值，因为它们嵌套：即，使用blockquote { font-size: 1.5em; }，如果将块引用放入块引用中，则会得到字体 - 与正文字体大小相比，大小为1.5 * 1.5 = 2.25em。那是你要的吗？也许，也许不是。

我应该在哪里使用ems

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

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

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

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

Answer 2

您可能会发现How to size text using ems一个有趣且有用的读物。我试图记住的是我从ems到像素的转换。

在你的例子中：

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

如果浏览器默认文本大小为16px，则

1 em等于10像素。然后行高将等于14个像素。与bobince beings out一样，我会使用无单位line-height值。

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

Answer 3

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

我确信这不是“正确”的方式，但如果你问我，系统从一开始就设计得很差。

Answer 4

ems是相对的，所以如果你设置：

body {
    font-size: .6em;
}

一切都与此有关。

这意味着（这也是我的头开始受伤的地方），如果h1的默认字体大小比其他大多数文本（p，li大250％），则标题现在将是该默认大小的60％。所以它仍然比其他东西大2.5倍，但它比你没有设置规则要小60％。

现在，如果你这样说：

h1 {
    font-size: 1.2em;
}

如果你没有设定规则，h1现在会比现在大20％，所以它比已经缩小了20％，比第一条规则小了60％。这意味着它将不再与浏览器的h1和其他元素的默认值成正比。

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

因此，如果你知道你希望#wrapper div中的所有字体都是默认的1.5em，那么将它设置为完美。但是如果你想改变blockquote的大小以使它稍微小一点，你仍然会为#wrapper设置规则，但是然后为blockquote制定第二个规则。

Answer 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 */ 
}

的问候，

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

5 个答案: