Question

我有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是如何工作的？

感谢。

Answer 1

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

以下是一个例子：

＆＃13;

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

＆＃13;

<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>

＆＃13;

From MDN：

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

Answer 2

默认情况下，页面em为16px - 因此1.2em等于19px。

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

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

Answer 3

根据我的理解，1em =页面的当前字体大小

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

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

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

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

使用em设置h1的大小时尺寸错误

3 个答案: