官方文档
https://v4.bootcss.com/docs/content/typography/#responsive-font-sizes
说明
「自适应字体尺寸」,下简称 RFS,这也是 Bootstrap GitHub 仓库中的一个新项目。RFS 根据访问者设备或浏览器窗口的尺寸自动计算合适的字体大小(font-size)。
下面是它的工作过程:
- 所有
font-size
属性都已切换到@include font-size()
mixin,而 Bootstrap 的 Stylelint 配置现在可以阻止使用font-size
属性。- 默认情况下禁用该功能,但可以通过更改
$enable-responsive-font-sizes
布尔变量值来使用此项新功能。font-size
完全可以通过 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";
如果您从CDN加载Bootstrap,您将无法利用这些RFS规则。那么如果您是直接引用的CSS文件可用下面的方式为Bootstrap 4设置响应式字体:
1. 媒体判断屏幕
html { font-size: 1rem; }
@media (min-width: 576px) {
html { font-size: 1.25rem; }
}
@media (min-width: 768px) {
html { font-size: 1.5rem; }
}
@media (min-width: 992px) {
html { font-size: 1.75rem; }
}
@media (min-width: 1200px) {
html { font-size: 2rem; }
}
@media (max-width: 1200px) {
legend {
font-size: calc(1.275rem + 0.3vw);
}
h1,
.h1 {
font-size: calc(1.375rem + 1.5vw);
}
h2,
.h2 {
font-size: calc(1.325rem + 0.9vw);
}
h3,
.h3 {
font-size: calc(1.3rem + 0.6vw);
}
h4,
.h4 {
font-size: calc(1.275rem + 0.3vw);
}
.display-1 {
font-size: calc(1.725rem + 5.7vw);
}
.display-2 {
font-size: calc(1.675rem + 5.1vw);
}
.display-3 {
font-size: calc(1.575rem + 3.9vw);
}
.display-4 {
font-size: calc(1.475rem + 2.7vw);
}
.close {
font-size: calc(1.275rem + 0.3vw);
}
}
2. 最简单的办法
html { font-size: calc(1em + 1vw); }
参考文章
https://www.csdn.net/gather_2a/NtzaQg2sMDk1LWJsb2cO0O0O.html
https://www.oschina.net/news/104411/bootstrap-4-3-1-released