我目前正在这样设置我的字体大小，以便更轻松地计算 REM 值:
html { font-size: 62.5%; }
body { font-size: 1.6rem; } /* 16px */
但是，Bootstrap 5 当然使用根值(即 62.5%)来计算所有大小。它确实有像 $font-size-root 和 $font-size-base 这样的变量，并试图与那些试图让它正确计算事物的人一起玩。
首先，我尝试将 root 设置为 HTML 值，将 base 设置为 body 值，但这导致了错误的计算，并将 base 或 root 设置为 1.6rem 或 1rem 也造成了错误的输出。
有谁知道是否可以配置 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/CSS3 变量以获取 body font-size。以下是如何使用 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>关于css - 将 Bootstrap 5 设置为自定义 REM 字体大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/73077034/