Bootstrap如何为h1-h6、p标签的fs字号类配置响应式断点

Bootstrap 原生默认仅提供全局固定字号的fs-1~fs-6工具类，没有内置带断点前缀的响应式字号类，你写的fs-sm-4、fs-md-3这类类名在默认CSS中不存在匹配规则，所以不会生效。

方案1：通过SCSS批量生成响应式字号工具类（推荐） #

如果你用SCSS方式引入Bootstrap，可以直接利用框架自带的断点规则批量生成所有断点下的fs-{breakpoint}-*类，命名规则和你预期的写法完全一致：

// 先引入Bootstrap核心依赖
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/utilities";

// 批量生成带断点的fs类
@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    @for $i from 1 through 6 {
      .fs#{$infix}-#{$i} {
        font-size: $font-sizes[$i] !important;
      }
    }
  }
}

// 引入剩余Bootstrap样式
@import "bootstrap/scss/bootstrap";

编译完成后就可以直接使用你之前的写法：

<p class="fs-sm-4 fs-md-3 fs-lg-2">Hello, This is Me</p>

效果为：sm断点以下用fs-4字号，md断点及以上用fs-3字号，lg断点及以上用fs-2字号，和其他Bootstrap响应式工具类逻辑完全一致。

方案2：手写纯CSS规则（适配CDN引入场景） #

如果你直接用CDN引入编译好的Bootstrap CSS，不需要本地编译环境，可以直接补充对应CSS规则，断点值和字号值完全对齐Bootstrap默认配置：

/* sm断点 ≥576px */
@media (min-width: 576px) {
  .fs-sm-1 { font-size: calc(1.375rem + 1.5vw) !important; }
  .fs-sm-2 { font-size: calc(1.325rem + 0.9vw) !important; }
  .fs-sm-3 { font-size: calc(1.3rem + 0.6vw) !important; }
  .fs-sm-4 { font-size: calc(1.275rem + 0.3vw) !important; }
  .fs-sm-5 { font-size: 1.25rem !important; }
  .fs-sm-6 { font-size: 1rem !important; }
}
/* md断点 ≥768px */
@media (min-width: 768px) {
  .fs-md-1 { font-size: calc(1.375rem + 1.5vw) !important; }
  .fs-md-2 { font-size: calc(1.325rem + 0.9vw) !important; }
  .fs-md-3 { font-size: calc(1.3rem + 0.6vw) !important; }
  .fs-md-4 { font-size: calc(1.275rem + 0.3vw) !important; }
  .fs-md-5 { font-size: 1.25rem !important; }
  .fs-md-6 { font-size: 1rem !important; }
}
/* lg断点 ≥992px */
@media (min-width: 992px) {
  .fs-lg-1 { font-size: calc(1.375rem + 1.5vw) !important; }
  .fs-lg-2 { font-size: calc(1.325rem + 0.9vw) !important; }
  .fs-lg-3 { font-size: calc(1.3rem + 0.6vw) !important; }
  .fs-lg-4 { font-size: calc(1.275rem + 0.3vw) !important; }
  .fs-lg-5 { font-size: 1.25rem !important; }
  .fs-lg-6 { font-size: 1rem !important; }
}
/* xl断点 ≥1200px */
@media (min-width: 1200px) {
  .fs-xl-1 { font-size: 2.5rem !important; }
  .fs-xl-2 { font-size: 2rem !important; }
  .fs-xl-3 { font-size: 1.75rem !important; }
  .fs-xl-4 { font-size: 1.5rem !important; }
  .fs-xl-5 { font-size: 1.25rem !important; }
  .fs-xl-6 { font-size: 1rem !important; }
}
/* xxl断点 ≥1400px */
@media (min-width: 1400px) {
  .fs-xxl-1 { font-size: 2.5rem !important; }
  .fs-xxl-2 { font-size: 2rem !important; }
  .fs-xxl-3 { font-size: 1.75rem !important; }
  .fs-xxl-4 { font-size: 1.5rem !important; }
  .fs-xxl-5 { font-size: 1.25rem !important; }
  .fs-xxl-6 { font-size: 1rem !important; }
}

把这段CSS放在Bootstrap CSS引入标签之后，就可以正常使用带断点前缀的fs类。

方案3：使用原生响应式标题类 #

如果不需要精确控制每个断点的字号等级，只是需要文字随屏幕尺寸自动缩放，可以直接用Bootstrap内置的.h1~.h6类，默认开启RFS响应式字体规则，会自动适配屏幕尺寸调整字号：

<p class="h2">自动随屏幕缩放的标题级文字</p>

• 所有响应式类遵循Bootstrap移动端优先规则：小断点上设置的字号会在更大断点下持续生效，直到被更大断点定义的同属性类覆盖，和框架内置的间距、显隐等响应式工具类逻辑完全一致。
• 如果你自定义修改过Bootstrap的默认断点值，上述CSS/SCSS代码里的断点宽度需要同步调整为项目实际值。
• 上述方案内的字号值和Bootstrap原生fs-1~fs-6的默认字号完全一致，不会出现尺寸偏差。

内容的提问来源于stack exchange，提问作者KRD_CoDeR_BoY