I'm attempting to utilize Bootstrap's RFS functionality in version 5.1.3 to apply font sizing globally.
Within my SCSS file, I've defined some basic font sizes, imported the Bootstrap SCSS files, and configured the font size settings. However, when I compile the CSS, the font sizes remain in rem units only.
Here is the SCSS code snippet:
// Fonts
$font-size-root: 20px;
$font-size-base: 1rem;
$enable-responsive-font-sizes: true;
$enable-rfs: true;
$h1-font-size: $font-size-root * 1.8;
$h2-font-size: $font-size-root * 1.5;
$h3-font-size: $font-size-root * 1;
$h4-font-size: $font-size-root * 0.75;
$h5-font-size: $font-size-root * 0.5;
$h6-font-size: $font-size-root * 0.25;
$small-font-size: $font-size-root * 0.75;
$font-sizes: (
1: $h1-font-size,
2: $h2-font-size,
3: $h3-font-size,
4: $h4-font-size,
5: $h5-font-size,
6: $h6-font-size,
7: $small-font-size,
);
@import "Boostrap/bootstrap.scss";
body {
@include font-size($font-size-base);
h1 {
@include font-size($h1-font-size);
font-weight: bold;
}
h2 {
@include font-size($h2-font-size);
}
h3 {
@include font-size($h3-font-size);
}
h4 {
@include font-size($h4-font-size);
}
h5 {
@include font-size($h5-font-size);
}
h6 {
@include font-size($h6-font-size);
}
p {
@include font-size($font-size-root);
}
.btn {
@include font-size($btn-font-size);
}
}
However, the resulting compiled CSS code appears like this:
body {
font-size: 1rem;
}
body h1, body .h1 {
font-size: calc(1.35rem + 1.2vw);
font-weight: bold;
}
@media (min-width: 1200px) {
body h1, body .h1 {
font-size: 2.25rem;
}
}
... (continued CSS output)
Could I have missed something or misunderstood the concept of this feature entirely? My main concern is with the p tag, as it doesn't seem to be responsive at all.