em的上下文是什么？答案

【问题标题】：What is the context of em?em的上下文是什么？
【发布时间】：2013-03-04 03:01:28
【问题描述】：

在这个例子中：

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 乘以 16px（浏览器的标准字体大小）还是 0.5 乘以 2em（h1 的字体大小）？

【问题讨论】：

这个伤了我的脑筋。
哎呀，好问题！我的大脑好痛！
不确定这个问题与 RWD 有什么关系。
@BoltClock：确实如此。 RWD 通过以 em 为单位提供字体大小和以百分比为单位的宽度来表示赞赏。
查看友好的 dom 检查器中的“计算样式”选项卡将帮助您弄清楚这些计算

标签： html css responsive-design em

【解决方案1】：

它等于使用它的元素的“font-size”属性的计算值。继承沿着文档树向下运行。

要回答您的问题，它将是 2em 的 0.5 倍，而无论 h1 的父级计算出的字体大小是多少，这都是 2 倍。呼。

还需要注意的是，如果您在其他 CSS 属性上使用em，例如width 或height，则结果将根据您应用@987654329 的任何元素的计算font-size 计算得出@ 或 height 到，等等...

在我看来，下面的文章很好地描述了em 单元的使用和上下文，以及其他一些阅读材料和资源...rem 单元可能也会让您感兴趣。

您可能还想看看这个小提琴，看看它是如何更清晰的：

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

【讨论】：

如果它与其他属性一起使用，它只是使用它的元素的计算'font-size'属性。如果它用于 'font-size' 本身，那么它会引用 parent's 计算出的字体大小来进行自己的计算。
实际上，它不一定是父元素，它只是它继承的任何东西，例如，如果主体将其 font-size 设置为 16px，并且您在彼此之间嵌套了 5 个 div，并且在最后一个将字体大小设置为2em，其结果计算出的font-size 将是32px。
嗯，是的。无论哪种方式都是一样的，因为正如你所说的继承从父级到子级沿着文档树运行。
继承与此无关。当样式表为其设置值时，该属性不会被继承。
Perfekt，我似乎掌握了这一点:)

【解决方案2】：

em unit 表示元素的字体大小，除非在 font-size 属性的值中使用，它表示父元素的字体大小。从这个意义上说，在所呈现的情况下，上下文就是父元素。

在本例中，单词“toad”的字体大小因此等于h1 的父代的字体大小。从给定的数据中无法推断出它的具体价值。

当字体大小被计算时，h1 的父元素的字体大小已经被计算出来了，这时这个构造将会被处理；我们称之为s。首先计算h1 的字体大小，将s（父元素的字体大小）乘以2。然后计算span 元素的字体大小，将其父元素的字体大小乘以0.5，产生 s。理论上，舍入误差可能会导致此类过程的偏差最小，但在计算机中可以假设乘以 2 和 0.5 是精确的。

【讨论】：

【解决方案3】：

这取决于父元素的像素大小。如果你的父元素像素大小是 16px

.5em 将等于您的基本像素的一半，因此它将是 8px 和 h1 的 2em 将等于 32px。

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

http://pxtoem.com/

【讨论】：

没有。它基于父元素的计算字体大小，而不是正文字体大小。
@Quentin：我也指父母的大小。我没有说身体。将基础编辑为父级。
但是在这种情况下，父母的字体大小以像素为单位，不是吗？
@RascalCapac 这只是一个参考。它总是以像素为单位

【解决方案4】：

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

要强制它相对于 16px，您必须先将 h1 的父级设置为 font-size 16px。

.wrapper{字体大小：16px;} h1 { 字体大小：2em; } .smaller { 字体大小：0.5em; }

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

所以在这种情况下，

包装器的字体大小为 16 像素
h1 的字体大小为 2em 为 16px
span.smaller 的字体大小为 1em（继承自 h1 的 .wrapper（.5em of 2em））为 16px

请注意，em 是上下文的相对度量，名义上基于当前字体中的 M 个字符高度。对于所有意图，h1 的大小为 32px，span.smaller 的大小为 16px。

【讨论】：

或者您可以使用rem 单位而不是em 相对于浏览器基础font-size（当然还有浏览器支持的所有问题）
@Luca - 是的，支持问题是为什么 css“reset”存在并且经常使用，因此“起点”是一个更一致的预测值。
是的，这绝对是一个普遍有效的观点，我主要指的是这个：caniuse.com/rem（通常 IE 会妨碍您！）
@Luca - 是的，对 rem 的支持不是“还”普遍的，并且一如既往，您对某些基础的“重置”css 的使用将/应该在某种程度上取决于您的使用 - 纯 CSS 样式与代码操作与您的页面需求的“大多数”是什么（计算上，10px=1em 在大脑上比 16px=1em 容易得多，但实际上希望您的页面显示 10px 字体并不常见，因此设置为 10px 基数（大约 62.5 16px 的百分比）意味着您必须从 10px/1em 将很多东西设置为 1.2em 才能获得 12px 字体 - 我们将把 pica/point 的事情留到另一天 :)