logo标签列表

有人能简单解释一下什么是"em"（CSS的一个尺寸单位）吗？

css
7

有人能够清晰地解释一下CSS中em是什么尺寸单位吗？

当我们在网站中使用em作为尺寸单位时，为什么要使用%来设置body的大小？为什么不也使用em作为body的尺寸单位呢？

7个回答
14
找出它的最佳方法是查看CSS标准。在这里，您可以看到它被定义为所讨论元素的字体大小，即它与元素的字体高度有关。字体大小不是任何特定字母的测量值。实际字母的高度可能大于或小于字体大小，尽管通常它们会小于字体大小。根据Wikipedia：

在数字类型中，特定字母的高度与em的关系由字体设计师任意设置。但是，作为非常粗略的指南，“平均”字体的大写字母高度可能为em的70％，x高度为em的48％。

还要注意，在CSS标准中：

唯一例外的是“字体大小”属性，其中“em”和“ex”值是指父元素的字体大小。

这个例外很有道理，否则您将得到字体大小的递归定义。

一个常用但错误的定义是它是所讨论字母'M'的宽度。在排版中曾经这样定义过，但现在不再是这样了，对于CSS来说从未如此。事实上，'M'通常比1 em更窄（当然这取决于字体）。

8
4

“em”据说代表了1个字母"M"的宽度，但实际上却是当前字体大小。

“em”是相对的，所以如果你这样做：

table { font-size: 2em }
td { font-size: 2em }
中的文本大小将是正文文本的四倍，因为表格的字体大小是正文的两倍，而的字体大小是表格的两倍。 
p { margin-bottom: 1em }

段落现在将在其下面插入一个换行符，其高度正好为一行文本的高度。 （字母通常比行短，但您可以理解这个概念。）

1
一个小问题：你所说的 em 并不完全等于字母的高度。实际上，每个字母的高度都不同，而且它们中没有一个必须等于 1 em。通常情况下，字母的高度都小于 1 em。 - Mark Byers
1

'Em' 表示 "当前用户代理正在使用的字体大小的 x 倍".

这意味着，如果访问者使用10pt字体作为默认值，则 1em 等于 10pt，2em 等于 20pt，以此类推。

您可以在这里找到有关不同 CSS 单位的其他信息: http://www.w3schools.com/css/css_units.asp

1

你已经从现有的答案中对'em'有了一些了解，但没有一个注意到另一件事情。

使用em可以创建所谓的“弹性”化妆品。这意味着，如果您使用em指定所有块的大小，则在用户按下“Ctrl +”（或者在某些浏览器中使用其他组合键来放大字体大小）之后，您的网站将保持其比例。

但是块也可以按“px”缩放。 - Jitendra Vyas
我不确定这对所有浏览器都适用。如果您能在w3c文档中找到相关链接，我将不胜感激。 - Roman
新的浏览器会缩放整个页面，只有旧的浏览器（如IE6时代）才会以此方式工作。 - Rich Bradshaw
现代浏览器缩放整个页面的主要原因在于网页设计和HTML/CSS的不足。 - aehlke
这是正确的，并且这里有一篇关于这种较新技术的文章：http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/ - i_a
0

来自维基百科：

em是排版领域中的一种度量单位。该单位定义了字母宽度和高度与当前字体点大小的比例。最初，该单位源于特定字体中大写字母“M”的宽度。该单位并未以任何特定字体为基础进行定义，因此在给定点大小下，所有字体的em值都相同。因此，在16点字体中，1个em等于16点。

如果网站上没有使用"M"，该怎么办？ - Jitendra Vyas
0
在CSS中，“em”是一种相对于字体大小表达尺寸的方式。“1 em”表示“与当前字体框相同大小”。 “1.5 em”表示元素的大小约为字体大小的1-1/2倍。
这样，所有内容都可以很好地按比例缩放。
请参见：CSS长度单位参考。
那么，百分号（%）与其不同的是什么？而你所提到的“current font”指的是什么？ - Jitendra Vyas
百分比（%）和em-height（em）都是相对长度单位。1.5em与说150％是一样的。但是em始终相对于父元素的字体大小来表示。但是百分比值可以相对于另一个不是字体大小的值来表示。例如，表格单元格的宽度可以指定为整个表格的百分比。这完全取决于属性允许什么。http://msdn.microsoft.com/en-us/library/ms531211%28VS.85%29.aspx - Robert Cartaino
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接