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

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

@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;
}

html css sass bootstrap-4

18.12.2018 15:43

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

789

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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) {

Вы человек! двойное спасибо, что указали на мою другую ошибку

— 21.12.2018 00:52

18.12.2018 16:48