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

Question

我正在使用 Bootstrap 4 构建响应式 Web 应用程序。与桌面设备相比，我希望移动设备上所有文本的字体大小都减小，因此我根据 Bootstrap 文档 (https://getbootstrap.com/docs/4.0/content/typography/) 在基本 css 文件中添加了以下内容:

 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

截至 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 实现响应式文本。 However you need to specify the desired appropriate selector(s) for text that you want to resize...

@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