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

Posted 2023-03-06

【中文标题】如何在 rem 中实现响应式字体大小 - bootstrap

【英文标题】：How to implement responsive font size in rem - bootstrap

【发布时间】：2016-03-20 23:40:45

【问题描述】：

我在我的项目中使用 bootstrap 3，我看到 bootstrap 中有 2 个 font-size 声明，如下所示：

Scaffolding.less

html  font-size:10px;

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

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

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

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

为什么bootstrap的html和body字体大小不同？

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

【问题讨论】：

我对这个论点的最大质疑是，在响应断点处调整字体大小和间距时，您可以在 html 元素上设置新的字体大小，并且您在 rem 中设置的每个测量值都会自动调整，而使用 px，您需要为要调整的每个测量值编写新规则。当然，即使使用 rem 也可能需要更多的调整，但是通过巧妙的计划，您可以获得大量的免费比例缩放。将某些框间距测量值与类型、更轻的代码和更少的复杂性/更高的可维护性联系起来，对我来说显然是对 rem 的胜利。

@Jinu - 我也在做同样的事情。对不起，如果有任何混淆。我的意图是在 html 或 body 上使用像素字体大小（不管怎样），并使用 rem 单位定义其余部分。我的疑问是，为什么在正文中定义基本字体大小（以像素为单位）不起作用，而在 html 中定义确实有效。为什么 bootstrap 在 html 和 body 中有不同的字体大小？

【参考方案1】：

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 字体大小只是他们使用的一些全局重置的一部分。此外，一些边距/填充是使用基本字体大小计算的，因此最好不要过多干扰。

【讨论】：

谢谢，这就是我要找的信息。所以这意味着，我可以安全地在 html 上设置字体大小，然后在整个过程中使用 rem，当用于其他大小的屏幕时，我会在媒体查询中更改 html 字体大小。

【参考方案2】：

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

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

注意：评论太长了。对不起

【讨论】：

"如果你在 body 元素上设置了 20px 的字体大小，那么 1rem = 20px 和 2rem = 40px。"你确定吗，因为我认为 rem 不会以 body 元素字体大小为基础，它会以 html 中的字体大小为基础。而且，em 是相对于该元素上定义的字体大小，而 rem 是相对于 root。

抱歉弄错了。与他们混淆。是的。你说的对。 rem 取决于 html(root)。