gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 05:37:43 34 4
gpt4 key购买 nike

我目前正在这样设置我的字体大小,以便更轻松地计算 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.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/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/

34 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com