% 和 em 有什么区别？

Question

% 和 em 长度值有什么区别？如果包含元素的字体大小为 10px，则 1em = 10px，100% = 10px。 Stackoverflow 中的答案都没有回答这个特定的问题。

Answer 1

em 是对相关元素当前字体大小的相对度量。 1em 等于相关元素的当前字体大小。

如果您没有在页面的任何位置设置字体大小，那么它将是浏览器的默认值，可能是 16 像素。所以默认情况下 1em = 16px。如果你要在你的身体上设置一个 20px 的字体大小，那么 1em = 20px。

% 但是不依赖于任何特定属性。当您将其应用于不同的属性时，它的参考会发生变化。

看这个例子：

section{
  width:100%;
}
div{
  width:50px;
  height:50px;
  margin:0;
  padding:0;
}
.a{
  background-color:red;
}
.b{
  background-color:blue;
  width:2em;
}
.c{
  background-color:green;
  width:50%;
}

<section>
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</section>

Answer 2

em 单元依赖于font-size。 它可用于适合大小更改/缩放的文本。

在下面的sn-p中你可以看到区别：

let list = document.querySelectorAll('.fs');

let fs = 10;
setInterval(() => {
  if (fs > 36) fs = 10;
  list.forEach(el => el.style.fontSize = fs+'pt');
  fs += 1;
}, 100)

.em {
  width: 2em;
  background-color: cyan;
}
.perc {
  width: 10%;
  background-color: pink;
}

<div class="em fs">2em</div>
<div class="perc fs">10%</div>