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 前端自学 https://www.html.cn/ !!

来源: http://www.css88.com/framework/bootstrap/18045.html