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

Question

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

Scaffolding.less

html { font-size:10px;}

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

并且@font-base-size在variables.less

中定义为14px

我一直在阅读一些东西，其中一种获得响应式字体大小的方法是将基本字体大小定义为正文中的 px 或 html 然后在 rem[=29 中使用字体大小=] 用于 body 中的不同组件，例如 p、h1 等

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

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

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

Answer 1

如果你没有在页面的任何地方设置字体大小，那么它是浏览器默认的，这可能是 16px. 所以，默认 1rem = 16px，和 2rem = 32px .如果在 body 元素上设置 20px 的字体大小，则 1rem = 20px 和 2rem = 40px.

此外，em、rem不是绝对单位——它是相对于当前选择的字体大小的单位。除非您通过使用绝对单位（例如 px 或 pt）设置字体大小来覆盖字体样式，否则这将受到用户浏览器中字体选择或 OS 的影响如果他们做了一个，那么使用 em 作为通用长度单位是没有意义的，除非你特别希望它随着字体大小的缩放而缩放。

注意：评论太长了。抱歉

Answer 2

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

在 body 上定义 font-size 会起作用，但是所有使用 rem 单位定义 font-size 的子元素将回退到根/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 字体大小只是他们使用的一些全局重置的一部分。还有，有些margins/paddings是用基本字号计算的，所以最好不要干扰太多。