div 没有从 body 继承的字体大小

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 声明的 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>

Answer 2

正文{字体大小：1em} .text-one, .text-two, .text-three {字体大小: 1em}

你好再见

a div has no inherited font size from body