bootstrap v4.3引入了,您可以在scss编译器中启用它。如果你正在为你的项目编译css,我强烈建议你打开它。
如果您从cdn加载bootstrap,您将无法利用这些rfs规则。那么如果您是直接引用的css文件可用下面的方式为bootstrap 4设置响应式字体:
@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调整为您的窗口尺寸值。