如何使用带有 sass 的 Bootstrap 4 更改类的字体大小以使其响应？

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 !default;

$font-size-base 变量如下所示：

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

所以，到目前为止，我知道 h3 类的字体大小是 1.75rem，我想要的是字体大小从 xs 到 md 是 1.5rem，从 md 到 lg 是 1.75rem。

我去了 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 中，只需确保在默认值之后添加您的自定义覆盖。