scss Bootstrap响应式排版

Posted 2021-05-17

$font-multipliers: ( md: 0.9, sm: 0.8, xs: 0.75);
@mixin font-size($font-size-var) {
    @each $key,
    $val in $font-multipliers {
        @media only screen and (max-width: map-get($grid-breakpoints, $key)) {
            font-size: $font-size-var * $val;
        }
    }
}

h1 {
    @include font-size($h1-font-size);
}

h2 {
    @include font-size($h2-font-size);
}

h3 {
    @include font-size($h3-font-size);
}

h4 {
    @include font-size($h4-font-size);
}

h5 {
    @include font-size($h5-font-size)
}

h6 {
    @include font-size($h6-font-size)
}

p,
li,
span,
.btn {
    @include font-size($font-size-base)
}