如何使引导标题响应？答案

【问题标题】：How to make bootstrap headings responsive?如何使引导标题响应？
【发布时间】：2017-06-29 20:46:52
【问题描述】：

我正在制作一个引导网站。在所有屏幕尺寸上一切正常，但标题（h1）保持固定尺寸。它对于小屏幕来说太大了。如何修复引导程序 h1 或一般标题。

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-4

【解决方案1】：

您可以为此使用@media

@media screen and (max-width: 768px) {
    h1{
        font-size:14px;
    }
}

这意味着小于 768px 的 h1 标签字体大小将是 14px。

像这样你可以为你需要的所有像素设置。

【讨论】：

您可能还需要添加 !important

【解决方案2】：

这是我的解决方案。完全响应的引导标题

@import "bootstrap/scss/functions.scss";
@import "bootstrap/scss/variables.scss";
@import "bootstrap/scss/mixins.scss";

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .h1#{$infix} { font-size: $h1-font-size!important; }
    .h2#{$infix} { font-size: $h2-font-size!important; }
    .h3#{$infix} { font-size: $h3-font-size!important; }
    .h4#{$infix} { font-size: $h4-font-size!important; }
    .h5#{$infix} { font-size: $h5-font-size!important; }
    .h6#{$infix} { font-size: $h6-font-size!important; }

    .display-1#{$infix} {
      font-size: $display1-size!important;
      font-weight: $display1-weight;
      line-height: $display-line-height;
    }
    .display-2#{$infix} {
      font-size: $display2-size!important;
      font-weight: $display2-weight;
      line-height: $display-line-height;
    }
    .display-3#{$infix} {
      font-size: $display3-size!important;
      font-weight: $display3-weight;
      line-height: $display-line-height;
    }
    .display-4#{$infix} {
      font-size: $display4-size!important;
      font-weight: $display4-weight;
      line-height: $display-line-height;
    }
  }
}

【讨论】：

【解决方案3】：

最好在你自己的 sass 中使用 bootstrap sass，让它保持干燥和可维护

@import "../bootstrap-sass/bootstrap/variables";

@media screen and (max-width: $screen-md-max) {
    h1 {
        font-size:14px;
    }
}

【讨论】：