bootstrap如何设置响应式字体大小？

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调整为您的窗口尺寸值。

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

以上就是bootstrap如何设置响应式字体大小？的详细内容，更多请关注万博manbetx平台中文网其它相关文章！