html中响应式字体怎么写,bootstrap如何设置响应式字体大小？

编程知识行业动态更新时间:2024-06-13 00:22:36

bootstrap如何设置响应式字体大小？下面本篇文章给大家介绍一下Bootstrap 4设置响应式字体大小的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

Bootstrap v4.3引入了响应字体大小(RFS)，您可以在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);