css - 如何在 rem - bootstrap 中实现响应式字体大小

Question

我在我的元素中使用 bootstrap 3，我看到 bootstrap 中有 2 个字体大小声明，如下所示:

无脚手架

html { font-size:10px;}

body{ font-size : @font-base-size; }

@font-base-size 在 variables.less 中定义为 14px

我一直在阅读一些东西，其中一种具有响应式字体大小的方法是将基本字体大小定义为 px 在 body 或 html 中，然后在 rem 中为 body 中的不同组件使用字体大小，例如p, h1 等

但我不确定，我应该在哪里定义基本字体，它应该在 html 还是 body 中？

为什么 bootstrap 在 html 和正文中的字体大小不同？

我的观察:当我在 html 中以 px 定义一些字体大小时，只有 rem 对所有内容都有效，在 body 中将字体大小定义为 px 不适用于 rem。

Answer 1

rem 单元是相对于根或 html 元素的。因此，应该在 html 元素上定义基本字体大小。

在 body 上定义一个 font-size 会起作用，但是所有具有 font-size 定义的子元素都使用 rem 单元将返回到 root/html 元素来计算它们的绝对大小。

所以:

html {
  font-size: 10px;
}

body {
  font-size: 15px;
}

.parent {
  /* font-size will be 15px here */
}

.parent .child {
  font-size: 1.2rem; /* resolved to 12px */
}

至于为什么 Bootstrap 使用 2 种字体大小:html 元素上的 10px 字体大小只是他们使用的一些全局重置的一部分。此外，一些边距/填充是使用基本字体大小计算的，因此最好不要干扰太多。