如何更改类的字体大小，以使用带有SASS的Bootstrap4响应响应

Question

所以，我正在使用Bootstrap 4 Sass进行一个项目，我想让H3的字体大小响应。

当我进入_type.scss时，H3属性看起来像这样：

h3, .h3 { font-size: $h3-font-size; }

它从_variables.scss调用变量$ h3-font-size，看起来像这样： $ h3 font-size：$ font-size-base * 1.75！默认;

$ font-size-base变量看起来像：

$font-size-base:              1rem !default;

所以，我知道H3类的字体大小为1.75REM，我想要的是字体大小从XS到MD，并且是从MD到LG的1.75REM。/p>

我去了Bootstrap 4文档以进行排版，它说：

响应式排版是指在一系列媒体查询中简单地调整根元素的字体大小来扩展文本和组件。Bootstrap不能为您提供此操作，但是如果您需要的话，它很容易添加。

这是实践中的一个例子。选择您想要的任何字体大小和媒体查询。

html {
  font-size: 1rem;
}
@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}
@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}
@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}

如何将其包含在_type.scss中，以使H3能够像我想要的那样响应？我必须使用CSS3的Calc（）函数吗？如果我必须这样做，我该如何实现？

Answer 1

您可以将其指定不同的方式。您可以使用以下内容替换_type.scss中的整个H3线，并修改值以适合您的需求：

@include media-breakpoint-up(sm) {
  h3, .h3 { $font-size-base * 1.25 !default; }
}
@include media-breakpoint-up(md) {
  h3, .h3 { $font-size-base * 1.5 !default; }
}
@include media-breakpoint-up(lg) {
  h3, .h3 { $font-size-base * 1.75 !default; }
}

个人通常不喜欢修改默认框架部分，因此您可以轻松地返回默认设置。这样做也可以在以后产生升级头痛。因此，我要做的是创建另一个称为_custom_type.scss的部分，将上述代码添加到其中，然后将其编译到您的CSS中，只需确保在默认值之后添加您的自定义Overrides 。