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



我目前正在这样设置我的字体大小,以便于在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.6rem1rem也会导致错误输出。

有人知道当我设置这个时,是否可以配置Bootstrap 5使其输出与32px(计算样式(匹配的值吗?例如:

$h1-font-size: 3.2rem;

这样,我可以大大简化计算,Bootstrap将使用与CSS其他部分相同的计算。

提前感谢您的建议!我在这里尝试了几次搜索,但遗憾的是找不到太多相关的问题

rem单位基于html元素的字体大小,默认大小为16px。

要实现您正在做的事情,只需将font-size: 10px设置为html即可。示例:

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

现在,在Bootstrap 5中执行此操作需要更改正文字体大小的SCSS/CS3变量。下面是一个如何使用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>

最新更新