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>

如果从font-size中删除m1，您会发现字体大小发生了变化，即未继承自body。

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

不要告诉我我需要为每个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

body {字体大小：1em} .text-one，.text-two，.text-three {font-size：1em}

HaiHalloBye