如何使用 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:
- 添加一个
custom.scss
文件 @import "node_modules/bootstrap/scss/bootstrap";
- 并设置一个 Sass 编译器
https://getbootstrap.com/docs/4.0/getting-started/主题/
这篇关于如何使用 Bootstrap 4 实现响应式排版?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!