使用 em 为 h1 设置尺寸时尺寸错误答案

【问题标题】：Wrong size when setting size for h1 using em使用 em 为 h1 设置尺寸时尺寸错误
【发布时间】：2017-04-12 21:17:29
【问题描述】：

我有 h1 标签，我尝试使用 em 设置此标签的字体大小，但它没有变大，而是变小了。以下是我的代码：

h1{
  font-size: 1.2em;
}

<div class="container">
  <h1>This is a title</h1>
  <p>hello this is a paragraph</p>
  </div>

在我的代码中注意到，在删除 1.2em 后，它又变大了。据我了解，1em = 页面的当前字体大小。制作 2em 应该使它的大小翻倍。 1.2em 应该让它更大一点，但对我来说，它让它变得更小。在这种情况下 em 是如何工作的？

【问题讨论】：

em 是一个度量单位，就像px 一样，但是它是相对于它的包含元素的。 pxtoem.com，jsfiddle.net/eb0uv5LL 正在按预期工作，所以我假设您的页面上还有其他 css？也许是引导程序？
嗨，即使在您的 jsfiddle 示例中，设置 1.2em 也应该使其更大，对吗？它应该是原始大小的 1.2，但 h1 更小。
正如您在问题中所说的em 基于body（或包含元素的大小），因此更改h1 的大小您将覆盖其默认值。如果你在h1 中加上span 和1.2em，你会得到我所相信的，更新小提琴jsfiddle.net/eb0uv5LL/2

标签： css font-size

【解决方案1】：

您的定义是正确的，但也有一个默认样式，并且em 与具有固定大小的父元素的字体大小相关（如果没有其他，则为body 元素元素具有固定大小）。

这是一个例子：

body {
  font-size: 13px;
}
.container h1{
  font-size: 1.2em;
}
.container2 {
  font-size: 20px;
}
.container3 {
  font-size: 0.5em;
}

<div>text - 13px</div>
<h1>title 1 - 26px (default to 2em == 13*2 = 26px)</h1>
<div class="container">
  <h1>This is a title - 15.6px (1.2em == 13*1.2 = 15.6px)</h1>
  <p>hello this is a paragraph - 13px</p>
</div>
<div class="container2">
  <h1>Another title - 40px (parent is 20px, default is 2em, 2*20 == 40px)</h1>
</div>
<div class="container3">
  <h1>3rd title - 13px (parent is 13px*0.5(em) == 6.5, default h1 is 2em, 2*6.5px == 13px)</h1>
</div>

From MDN:

邮件另一种设置字体大小的方法是使用 em 值。 em 值的大小是动态的。在定义 font-size 属性时，em 等于应用于相关元素父级的字体大小。如果您没有在页面的任何位置设置字体大小，那么它是浏览器的默认值，通常是 16px。因此，默认情况下 1em = 16px，而 2em = 32px。如果你在 body 元素上设置了 20px 的字体大小，那么 1em = 20px 和 2em = 40px。请注意，值 2 本质上是当前 em 大小的乘数。

【讨论】：

你怎么知道元素的默认em？
@Jacky, stackoverflow.com/a/6140504/648350 浏览器默认标题的典型尺寸
另一个选项 - 右键单击元素。检查元素并检查用户代理值:)
我也可以在浏览器中查看。谢谢。所以只是想知道。标签总是需要它？如果我在另一个容器上设置大小，它会选择它还是只查看标签？例如，如果我有
那么
将 1.2 与 div 或标签相关？
@JishnuVS，不，没有“硬”定义。浏览器可以将默认设置为 16px，但也可以设置其他默认值。

【解决方案2】：

默认情况下，页面em 是16px - 所以1.2em 等于19px。

页面的默认h1为2em或等于32px。

因此，通过更改您所拥有的值，它将减小h1 的自然大小。

【讨论】：

在哪里可以找到页面的默认 em？
您可以使用body{font-size:16px} 设置页面或body 字体大小，但如果未指定，浏览器将使用16px 作为默认大小。

【解决方案3】：

据我了解，1em = 页面当前字体大小

那不是真的。您将em 与rem 混淆了，后者是根元素的计算font-size。

em 是使用它的元素的计算 font-size。

但是，当您在font-size 本身上使用em 单位时，这当然行不通，那将是一个循环定义。在这种情况下，em 指的是计算得出的父元素的font-size。

然后，如果 h1 在用户代理样式表中默认使用 font-size: 2em 设置样式，如果您使用 font-size: 1.2em 覆盖它，它会变小！

【讨论】：

将 1.2 与 div 或 标签相关？

将 1.2 与 div 或标签相关？