什么是em的上下文？

Question

什么是em的上下文？

57

在这个例子中：

CSS 样式表

h1 { font-size: 2em; }
.smaller { font-size: 0.5em; }

HTML

<h1>Hi, I am a <span class="smaller">toad</span></h1>

单词“toad”将是0.5倍的16像素（浏览器标准字体大小）还是0.5倍的2 em（h1的字体大小）？

- Robin Cox

查看您友好的DOM检查器中的“计算样式”选项卡将有助于您弄清这些计算。 - Luca

4个回答

3

em是表示元素字体大小的单位，除非在font-size属性的值中使用时，此时它表示父元素的字体大小。因此，在所示例子中，上下文是父元素。

在所示例子中，“toad”单词的字体大小等于h1标签的父元素的字体大小。从所提供的数据中不能推断出具体的数值。

计算字体大小时，处理这个结构时，h1标签的父元素的字体大小已经计算好了; 让我们称其为s。首先计算h1标签的字体大小，将s(父元素的字体大小)乘以2。然后计算span标签的字体大小，将其父元素的字体大小乘以0.5，得到s。理论上，舍入误差可能会导致最小的偏差，但可以假定在计算机中2和0.5的乘法是精确的。

- Jukka K. Korpela

1

在这个上下文中，它将是h1元素2em的0.5倍。

如果要让它相对于16px，您首先需要将h1的父元素设置为字体大小16px。

.wrapper {font-size: 16px;} h1 {font-size: 2em;} .smaller {font-size: 0.5em;}

<div class="wrapper"><h1>Hi, I am a <span class="smaller">toad</span></h1></div>

因此，在这种情况下，

wrapper的字号为16px
h1的字号为16px的2em
span.smaller的字号为16px的1em（.wrapper从h1继承了.5em of 2em）

请注意，em是相对于当前字体中M字符高度为基础的上下文的相对度量。因此，就所有意图而言，h1具有32px大小，span.smaller具有16px大小。

- Mark Schultheiss

1

或者您可以使用 rem 单位代替 em，以相对于浏览器基础 font-size 进行设置（当然，这会涉及到浏览器支持的问题）。 - Luca

@Luca - 是的，支持问题是为什么CSS“重置”存在并经常使用的原因，以便“起点”是更一致预测的值。 - Mark Schultheiss

是的，那绝对是一个普遍有效的观点，我主要是指这个：http://caniuse.com/rem（通常IE会成为阻碍！） - Luca

2

@Luca - 是的，目前对于rem的支持还不是“普遍”的，而且像往常一样，你使用“重置”css到某个基础上会/应该在某种程度上取决于你的用途 - 纯CSS样式 vs 代码操作 vs 大多数页面所需的内容（计算上，10px=1em比16px=1em更容易理解，但实际上很少有人想要页面显示10px字体，因此将其设置为10px基准（约为16px的62.5%）意味着您必须从那个10px/1em设置大量的东西为1.2em，以获得例如12px字体 - 我们将把pica/point的事情留到另一天 :) - Mark Schultheiss

1

它取决于父元素像素大小。如果您的父元素像素大小为16px

.5em将等于基础像素的一半，因此为8px，2em用于h1将等于32px。

这完全取决于您在CSS中设置父元素像素大小的方式。

http://pxtoem.com/

- defau1t

不是基于 body 字体大小，而是基于父元素计算出的字体大小。 - Quentin

1

@Quentin：我也是指父元素大小。我没有说body。将base编辑为parent。 - defau1t

但在这种情况下，父元素的字体大小是以像素为单位的，不是吗？ - Robin Cox

@RascalCapac 这只是一个参考。它将始终以像素为单位。 - defau1t

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Seer · Accepted Answer

这是与“font-size”属性一起使用时应用于元素的计算值相等。继承向下运行文档树。

回答您的问题，它将是2em的0.5倍，而2em又将是h1父元素的计算字体大小的两倍。哇。

还要注意，如果在其他CSS属性（例如width或height）上使用em，则结果将从应用width或height的任何元素的计算font-size计算而来，等等...

以下文章在我看来描述了em单位的使用和上下文相当不错，以及其他阅读材料和资源... rem单位也可能会使您感兴趣。

您还可以查看此Fiddle，以了解其更清晰的操作方式：

http://jsfiddle.net/HpJjt/3/