Bootstrap 4设置响应式字体大小
- 发表于
- 前端
Bootstrap v4.3引入了响应字体大小（RFS），您可以在SCSS编译器中启用它。如果你正在为你的项目编译CSS，我强烈建议你打开它。
如果您从CDN加载Bootstrap，您将无法利用这些RFS规则。那么如果您是直接引用的CSS文件可用下面的方式为Bootstrap 4设置响应式字体：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
@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); } } |
将上面的CSS复制到您网站的CSS（加载Bootstrap CSS之后）即可实现响应式字体，其中1200调整为您的窗口尺寸值。
