如何使用 Bootstrap 4 实现响应式排版? [英] How do I implement responsive typography with Bootstrap 4?

问题描述

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

I'm building a responsive web app with Bootstrap 4. I want the font size of all text to be reduced on mobile devices compared to desktop, so I added the following to my base css file as per the Bootstrap documentation (https://getbootstrap.com/docs/4.0/content/typography/):

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

但是字体大小保持固定.我做错了什么?

However the font size remains fixed. What am I doing wrong?

推荐答案

这是一个 Sass 功能.

This is a Sass feature.

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

To have access to the media-breakpoint mixins and the size variables, you need to:

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

https://getbootstrap.com/docs/4.0/getting-started/主题/

这篇关于如何使用 Bootstrap 4 实现响应式排版?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！