Как изменить размер шрифта заголовка Bootstrap 4 на экранах различной ширины с помощью SASS?

Question

Цель довольно проста: мне нужны разные размеры шрифтов для разных размеров экрана.Я стараюсь кодировать здесь, но это не работает так, как я ожидал.После исследования единственное, что мне пришло в голову, - это то, что может быть проблема между тем, как запросы и переменные играют друг с другом, но я не уверен.Вот что я пытался ожидать, что это сработает:

@media (max-width: 768px) {
    $h1-font-size:                $font-size-base * 1.944;
    $h2-font-size:                $font-size-base * 1.555;
    $h3-font-size:                $font-size-base * 1.333 !default;
    $h4-font-size:                $font-size-base * 1.222 !default;
    $h5-font-size:                $font-size-base * 1.111 !default;
    $h6-font-size:                $font-size-base !default;

    .mixin-testix {
        font-size: 40px;
    }
} 


@media (min-width: 768px) and (max-width: 992px) {
    $h1-font-size:                $font-size-base * 2.222;
    $h2-font-size:                $font-size-base * 1.777;
    $h3-font-size:                $font-size-base * 1.388 !default;
    $h4-font-size:                $font-size-base * 1.222 !default;
    $h5-font-size:                $font-size-base * 1.111 !default;
    $h6-font-size:                $font-size-base !default;    
} 


@media (max-width: 992px) and (max-width: 1200px) {
    $h1-font-size:                $font-size-base * 2.777;
    $h2-font-size:                $font-size-base * 2.222;
    $h3-font-size:                $font-size-base * 1.666 !default;
    $h4-font-size:                $font-size-base * 1.222 !default;
    $h5-font-size:                $font-size-base * 1.111 !default;
    $h6-font-size:                $font-size-base !default;
} 

Answer 1

Вы не можете переназначить значение переменной внутри запроса @media, но вы можете использовать значение переменной внутри запроса @media.Например,

@media (min-width: 768px) and (max-width: 991.98px) {
    h1, .h1 { font-size: $font-size-base * 2.222; }
    h2, .h2 { font-size: $font-size-base * 1.777; }
    h3, .h3 { font-size: $font-size-base * 1.388; }
    h4, .h4 { font-size: $font-size-base * 1.222; }
} 

Демо: https://www.codeply.com/go/8wiWhxkaFZ

Также обратите внимание: в вашем крупнейшем медиа-запросе есть опечатка.Это должно быть min-width, а не max-width.

@media (min-width: 992px) and (max-width: 1200px) {