将Bootstrap 5设置为自定义REM字体大小。

Question

将Bootstrap 5设置为自定义REM字体大小。

4

我目前是这样设置字体大小的，以便于使用 REM 值进行计算：

html { font-size: 62.5%; } 
body { font-size: 1.6rem; } /* 16px */

然而，Bootstrap 5 当然使用根值（即62.5%）计算所有的尺寸。它确实有诸如$font-size-root 和 $font-size-base 等变量，我试图通过调整这些变量来正确计算大小。

首先我尝试将根设置为HTML的值，并将基础值设置为body的值，但这导致了错误的计算。同时，将根或基础值设置为1.6rem 或 1rem 也会导致错误的输出。

请问是否有人知道是否可以配置Bootstrap 5，使其在我设置例如32px（计算样式）时输出匹配的值？

$h1-font-size: 3.2rem;

这样我就能大大简化计算，Bootstrap将使用和CSS其他部分相同的计算方式。

提前感谢您的建议！我在这里尝试了几次搜索，但遗憾地没有找到太多相关的问题。

- Stefan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Arslan Akram · Accepted Answer

rem单位是基于html元素的字体大小，其默认大小为16像素。

要实现您所需的效果，只需将html的font-size设置为10px即可。例如：

html { font-size: 10px; }
body { font-size: 1.6rem; } /* This will be 16px */

现在，在Bootstrap 5中进行此操作需要更改body字体大小的SCSS/CSS3变量。以下是使用CSS进行操作的示例：

html { font-size: 10px; }

:root {
  --bs-body-font-size: 1.6rem;  /* Overwrite this variable */
  font-size: var(--bs-body-font-size);
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<html>
  <body>
    <p>This is 1.6rem or 16px.</p>
  </body>
</html>