如何使用 Bootstrap 4 实现响应式排版？答案

【问题标题】：How do I implement responsive typography with Bootstrap 4?如何使用 Bootstrap 4 实现响应式排版？
【发布时间】：2018-06-16 01:02:40
【问题描述】：

我正在使用 Bootstrap 4 构建一个响应式 Web 应用程序。与桌面设备相比，我希望移动设备上所有文本的字体大小都减小，因此我根据 Bootstrap 文档将以下内容添加到我的基本 css 文件中 (@ 987654321@):

 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;
  }
}

但是字体大小保持不变。我做错了什么？

【问题讨论】：

标签： responsive-design bootstrap-4

【解决方案1】：

从 Bootstrap 4.3.1 开始，现在有 RFS（响应式字体大小）！但是，作为explained in the docs，您必须使用$enable-responsive-font-sizes SASS 变量启用它。

RFS 演示：https://www.codeply.com/go/jr8RbeNf2M

在 Bootstrap 4.3.1 之前，您可以使用 SASS 实现响应式文本。但是，您需要为要调整的文本指定所需的相应选择器...

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

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.1rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.3rem;
  }
}

@import "bootstrap";

演示：https://www.codeply.com/go/5pZDWAvenE

这也可以仅使用 CSS（无 SASS）来完成：

演示：https://www.codeply.com/go/E1MVXqp21D

【讨论】：

在 Rails 中确保这段代码（html 到最后一个媒体点中断）出现在最后一次导入（@import "bootstrap";）之后，而不是在它上面。并写在application.scss中
演示似乎不起作用：codeply.com/go/5pZDWAvenE，字体大小始终保持不变。
在 Bootstrap 4.5 中，我在导入引导 SCSS 之前设置了$enable-responsive-font-sizes: true;，但是当我更改窗口大小时字体大小不会改变。缺少什么？

【解决方案2】：

我认为最简单的方法是使用 @media Queries。假设您想响应地更改具有类“class-name”的内容甚至整个 html 标记的字体大小，只需将媒体查询添加到 css 文件的末尾或其中的任何位置。

示例代码：

/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/

  /* Small devices (landscape phones, 544px and up) */
  @media (min-width: 544px) {  
    .class-name {font-size: 16px;}
  }

  /* Medium devices (tablets, 768px and up) */
  @media (min-width: 768px) {  
    .class-name {font-size: 30px;}
  }

  /* Large devices (desktops, 992px and up) */
  @media (min-width: 992px) { 
    .class-name {font-size: 40px;}
  }

  /* Extra large devices (large desktops, 1200px and up) */
  @media (min-width: 1200px) {  
    .class-name {font-size: 48px;}
  }

更多信息可以找到here

【讨论】：

【解决方案3】：

这是一个 Sass 功能。

要访问媒体断点混合和大小变量，您需要：

添加custom.scss文件
@import "node_modules/bootstrap/scss/bootstrap";
并设置 Sass 编译器

https://getbootstrap.com/docs/4.0/getting-started/theming/

【讨论】：

【解决方案4】：

不是一个完整的答案，但一个很好的起点是在 v.4.5 中启用响应式字体大小

$enable-responsive-font-sizes: true;
@import "../../../node_modules/bootstrap/scss/bootstrap";

【讨论】：

【解决方案5】：

这是另一种使用循环的方法

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

$font-sizes: (
    html: ( xs: 1rem, sm: 1.2rem, md: 1.3rem),
  );

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

    @each $name, $values in $font-sizes {
      @each $n, $value in $values {
        @if($infix == "-#{$n}" or ($infix == "" and $n == 'xs')) {
          #{$name} { font-size: $value; }
        }
      }
    }
  }
}

【讨论】：

优秀的替代品。只是不要忘记将 1rem 应用于意味着 $font-size-base * 1。所以您可能希望 1rem 作为您的最大值。即 $font-sizes: ( html: ( xs: 0.75rem, sm: 0.813rem, md: 0.875rem, lg: 0.938rem, xl: 1rem ), );
@JFK 是的，你说得对。抱歉，“html”是指任何适当的排版标签。