Bootstrap 4: Как изменить размер шрифта текста с помощью медиа-запросов

Question

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

Код:

h1{
    font-size: 15px;
    padding-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: #E85A4F;
}

h2{
    font-size: 17.5px; 
}

p{
    font-size: 15px;    
}

@media only screen and (min-width: 576px){
    h1 {
        font-size: 20px;
        padding-top: 25px;
    }
}

Странно то, что когда я настраиваю размер шрифта абзаца, он работает нормально. Можно ли таким же образом настроить размер шрифта заголовка?

Answer 1

Строки в коде означают, что стиль перезаписан.

Это изображение показывает размер шрифта h1 код ниже. Как видите, есть несколько стилей для h1. Применяется тот, который отображается вверху на панели стилей (изображение выше). (Это селектор с наивысшей спецификацией, если существует несколько с одинаковой спецификацией, применяется последняя из последней таблицы стилей). Справа вы видите файл и строку, к которой применяется стиль.

Для решения вашей проблемы вы можете:

1. Удалить код из файла и строку, которая переписывает ваш стиль заголовка
2. Используйте селектор с более высокой специфичностью , в данном случае, например, h1.headline.
3. Добавить важный для вашего стиля (font-size: 30px!important;) Обратите внимание, что это самое простое, но самое грязное решение

h1{
  font-size: 30px;
}

@media only screen and (min-width: 800px){
  h1{
    font-size: 20px;
  }
}

/*
 a lot more css
 */
 
h1{
  font-size: 35px;
}

<div>
  <h1 class="headline">Test</h1>
</div>