Question

我正在使用Bootstrap 4构建响应式Web应用程序。我希望移动设备上的所有文本的字体大小与桌面相比减少，因此我根据Bootstrap文档将以下内容添加到我的基本css文件中（{ {3}}）：

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

但是字体大小仍然是固定的。我做错了什么？

Answer 1

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

示例代码：

{{1}}

可以找到更多信息here

Answer 2

这是一项Sass功能。

要访问media-breakpoint mixins和size变量，您需要：

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

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

Answer 3

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

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

Answer 4

自 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

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

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

5 个答案: