Question

CSS3为名为font-size的{{1}}定义了新的长度单位。这允许我们计算与根元素（html元素）相关的元素rem。

为了更轻松地计算font-size，我们通常假设根元素的font-size为font-size，因此CSS通常会这样结束：

16px

因此，html { font-size:62.5%; } // 10px = 16px * 0.625的每个元素高度都相对于rem，例如

10px

我无法找到为什么我们假设我们可以乘以p{ font-size : 1.4rem ;} // 14px = 10px * 1.4？我们如何相信每个浏览器都具有相同的16px基值？是否有关于预定义16px的标准说明？

参考

Answer 1

基础font-size由用户在浏览器中预先定义的偏好确定。

在几乎所有浏览器中，16px是比例字体的标准。这也可以根据字体是否使用衬线或是固定宽度字体而改变。

请记住，使用em使用父项font-size并与之成比例，而rem使用根html元素

例如：

html {
  font-size: 16px;
}
h1 {
  font-size: 2em; // 32px
}
p {
  font-size: 1em; // 16px
}
.someClass {
  font-size: .75em; // 12px
}
.someClass p {
  font-size: 2em; // 24px
}
.someClass p .test {
  font-size: 1.25rem; // 20px
}

<html>
<h1>2em Title Text</h1>
<p>Normal Element Text</p>
<div class="someClass">
  someClass font size
  <p>SomeClass with em</p>
  <p><span class="test">someClass p element with class test</span>
  </p>
</div>

</html>

每个浏览器的默认字体大小是16px吗？为什么？

1 个答案: