我目前正在这样设置我的字体大小,以便于在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其他部分相同的计算。
提前感谢您的建议!我在这里尝试了几次搜索,但遗憾的是找不到太多相关的问题
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>