bootstrap 4设置响应式字体大小-kb88凯时官网登录

时间:2020-03-21
阅读:
免费资源网 - https://freexyz.cn/

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

免费资源网 - https://freexyz.cn/
返回顶部
顶部
网站地图