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

如何使用带有sass的Bootstrap4来改变类的字体大小以使其响应？

1 个答案: