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

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);

}

}

将上面的CSS复制到您网站的CSS(加载Bootstrap CSS之后)即可实现响应式字体，其中1200调整为您的窗口尺寸值。

更多bootstrap的相关知识，可访问：web前端自学！!