Bootstrap4 字体大小根据屏幕改变

fendouweiqian

于 2019-10-21 16:46:46 发布

阅读量5.7k

点赞数 2

文章标签： bootstrap 自适应 rem

本文链接：https://blog.csdn.net/fendouweiqian/article/details/102667053

版权

1. 媒体判断屏幕

html { font-size: 1rem; }

@media (min-width: 576px) {
    html { font-size: 1.25rem; }
}
@media (min-width: 768px) {
    html { font-size: 1.5rem; }
}
@media (min-width: 992px) {
    html { font-size: 1.75rem; }
}
@media (min-width: 1200px) {
    html { font-size: 2rem; }
}

2. 最简单的办法

html { font-size: calc(1em + 1vw); }

3. 其他方法

@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.1rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.3rem;
  }
}

@import "bootstrap";