html - div 没有从正文继承的字体大小

Question

body{
font-size:0.9em;
}

.m1{
font-size:0.9em;
}

<div class='navt'>
<div class='m1'>LOREM</div>
<div class='m1'>LOREM</div>
</div>

如果从 m1 中删除 font-size，您会看到字体大小发生变化，即不是从 body 继承的。

我期望 body 中的所有 div 的 font-size 等于为 body 声明的。

难道每个div都需要单独设置font-size吗？

Answer 1

当使用 em 时，它意味着大小是相对于其父级的。您应该使用 rem 使其相对于文档的根目录。

在这种情况下，.m1 的字体大小为 0.9 * 0.9 = 0.81px。

body  {
  font-size: 0.9em;
}

.m1 {
  font-size: 0.9em;
}

.m2 {}

.m3 {
  font-size: 0.9rem;
}

.m4 {
  font-size: 0.9rem;
}

<div class='navt'>
  <div class='m1'>LOREM</div>
  <div class='m2'>LOREM</div>
  <div class='m3'>LOREM</div>
  <div class='m4'>LOREM</div>
</div>