如何使用带有 sass 的 Bootstrap4 更改 class 的字体大小以使其响应？

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 class 的字体大小是 1.75rem，我想要的是从 xs 到 md 的字体大小是 1.5rem，并且是 1.75rem从 md 到 lg.

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

如何使用带有 sass 的 Bootstrap4 更改 class 的字体大小以使其响应？

How to change the font size of a class to make it responsive using Bootstrap4 with sass?

css

sass

responsive

twitter-bootstrap-4

typography