Responsive design 如何使用Bootstrap 4实现响应式排版？

我正在用Bootstrap4构建一个响应迅速的web应用程序。与桌面相比，我希望移动设备上所有文本的字体大小都减小，因此我根据引导文档（）向我的基本css文件中添加了以下内容：

---

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

这是一个Sass功能

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

添加一个

custom.scss

文件

@import“节点模块/bootstrap/scss/bootstrap”

并设置一个Sass编译器

---

我认为最简单的方法是使用@媒体查询。假设您想相应地更改类为“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;}
  }

---

可以找到更多信息

从Bootstrap 4.3.1开始，现在有RFS（响应式字体大小）！但是，正如所示，必须使用

$enable responsive font size

SASS变量启用它

RFS演示：

---

在Bootstrap4.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"; 

演示：

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

---

演示：

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

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

---

这里有一种使用循环的替代方法

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

---

在Rails中，确保此代码（html下至最后一个媒体断点）出现在最后一次导入（@import“bootstrap”；）之后，而不是上面。并在application.scss中编写。演示似乎不起作用：，字体大小始终保持不变。在Bootstrap 4.5中，我设置了

$enable responsive font size:true导入引导SCS之前，但是更改窗口大小时字体大小不会更改。缺少什么？很好的选择。但不要忘记，将1rem应用于表示$font size base*1。因此，您可能希望1rem作为最大值。ie$字体大小：（html:（xs:0.75rem，sm:0.813rem，md:0.875rem，lg:0.938rem，xl:1rem），）@肯尼迪是的，你说得对。对不起，我说的“html”是指任何合适的排版标签。
@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; }
        }
      }
    }
  }
}