设置正文标记的字体大小

Question

我一直在尝试配置一个基本的CSS模板，我可以使用它开始使用REM。我看到了设置以下body { font-size: 62.5% };的方法，这样计算就更容易了(1 1rem=10 is，因为16 is是默认的字体大小)。

我不确定我是否喜欢这种方式，因为如果字体大小为10 my不是我的基线，就必须指定<h1>-<h6>和<p>标记的大小。

我一直在尝试一些不同的方法，并对px和%在字体大小方面的关系感到非常困惑。以下列例子为例：

<html>

<body>

  <header>
    <h1>Testing h1</h1>
    <h2>Testing h2</h2>
  </header>

  <main>
    <p>Random paragraph</p>
  </main>
</body>

</html>

考虑以下css：

body {
 font-size: 100%;
}

我期望浏览器呈现默认大小的字体，即16 is。<p>标记中的任何内容仍然是16 to，但是<h1> - <h6>恢复到浏览器样式表中指定的原始大小。为什么不将所有文本设置为16 to？

另一个例子是：

body {
  font-size: 12px;
}

为什么<h1>-<h6>不接受12px的字体大小？<h1>-<h6>确实变小了( 12/16 = 0.75)。我希望h1要么是12 is，要么保持相同的默认值，因为用户代理样式表中为h1-h6指定的值更具体。

这些规则在指定百分比方面是如何运作的？在设置样式表以便可以使用REM方面，最佳实践是什么？

Answer 1

rem相对于HTML，而不是BODY

rem单元基于HTML元素的字体大小，而不是BODY元素。因此，您应该这样设置基本字体大小：

HTML {font-size: 62.5%; } /* Now `rem` is equivalent to `10px` */

而不是

BODY {font-size: 62.5%; } /* Does NOT affect `rem` */

HTML字体大小可能影响滚动速度

注意，至少在某些浏览器中，HTML元素的字体大小会影响滚动步骤的大小：HTML元素的字体大小越小，步骤大小就越小，滚动速度越慢。

重置所有元素的字体大小

若要重置所有元素的字体大小，可以使用通用选择器：

* {font-size: 100%; }

或者：

* {font-size: 1em; }

实现跨浏览器一致性的适当DOCTYPE

此外，确保在HTML开头有适当的DOCTYPE声明，为文档打开符合标准的模式，以实现一致的跨浏览器呈现和行为：

<!DOCTYPE html>

Answer 2

为什么<h1>-<h6>不采用12 of的字体大小呢？

当您更改其祖先的字体大小时，<h1>和相关元素不会将其字体大小更改为与其祖先相同，仅仅因为它们的默认字体大小(在内置于浏览器的样式表中)没有设置为100%、1em、inherit或类似的字体，而且您还没有指定不同的字体大小来覆盖浏览器提供的字体大小。

<h1>-<h6>确实会变小( 12/16 =0.75时减少75% )。我希望h1要么是12 is，要么保持相同的默认值，因为用户代理样式表中为h1-h6指定的值更具体。

浏览器样式表中指定的值(至少在我的浏览器中)使用proportional单元，因此父元素的字体大小为em (<h1>为双)。

这些规则在指定百分比方面是如何运作的？

对于祖先元素(px、%或其他任何东西)的字体大小，您使用的单元的选择是不相关的。

Answer 3

对我来说挺好的。唯一的可能是，指向css文件的链接在HTML中丢失了.)否则，为了确保，尝试相同属性的内联样式。