本文共 1620 字，大约阅读时间需要 5 分钟。

官方文档

说明

「自适应字体尺寸」，下简称 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); }

参考文章

转载地址：http://xrgaf.baihongyu.com/