Question

％和em长度值之间有什么区别？如果包含元素'font-size是10px，1em = 10px，那么100％= 10px。 Stackoverflow中的答案都没有回答这个特定的问题。

Answer 1

em单位取决于font-size。它可以用于合适的尺寸更改/缩放文本。

在下面的代码段中，您可以看到差异：

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>

Answer 2

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

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

%但不依赖于任何特定属性。当您将其应用于不同的属性时，它的参考更改。

见这个例子：

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

％和em有什么区别？

2 个答案: