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 4设置响应式字体大小
所有媒体,可在保留署名、
原文连接
的情况下转载,若非则不得使用我方内容。