为基本字体标记启用Bootstrap 5响应字体大小(rfs)

ccrfmcuu  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(1)|浏览(255)

我正在尝试在v5.1.3中为基本字体标记全局启用Bootstrap的RFS功能。
在我的SCSS中,我设置了一些基本的字体大小,包括 Bootstrap 的scss文件,并设置了字体大小。但在编译的CSS中,字体大小仍然是rem。
SCSS:

//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);
    //border-style: solid;
    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);
    }
}

但编译后的CSS看起来像这样:

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;
  }
}
body h2, body .h2 {
  font-size: calc(1.3125rem + 0.75vw);
}
@media (min-width: 1200px) {
  body h2, body .h2 {
    font-size: 1.875rem;
  }
}
body h3, body .h3 {
  font-size: 1.25rem;
}
body h4, body .h4 {
  font-size: 0.9375rem;
}
body h5, body .h5 {
  font-size: 0.625rem;
}
body h6, body .h6 {
  font-size: 0.3125rem;
}
body p {
  font-size: 1.25rem;
}
body .btn {
  font-size: 1rem;
}

是我遗漏了什么还是我完全理解错了这个功能?最让我烦恼的是p标签。它根本没有响应。

guykilcj

guykilcj1#

不同的设备我有不同的尺寸。也许有更好的解决方案。告诉我。但是这个解决方案很有效。
示例:

@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */
    h1 {
        font-size: 3rem;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    h2 {
        font-size: 2rem;
    }

    h3 {
        font-size: 1.5rem;
        padding: 0 0 10px 0;
    }

    h4 {
        font-style: italic;
        font-size: 1.1rem;
    }

    h5, h6 {
        font-size: 1rem;
    }

    h6 {
        font-style: italic;
    }
}

以及:

@media (min-width:1281px) { /* hi-res laptops and desktops */
    h1 {
        font-size: 6rem;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    h2 {
        font-size: 4rem;
    }

    h3 {
        font-size: 3rem;
        padding: 0 0 10px 0;
    }

    h4 {
        font-style: italic;
        font-size: 1.1rem;
    }

    h5, h6 {
        font-size: 1rem;
    }

    h6 {
        font-style: italic;
    }
}

相关问题