Сделать отображаемые заголовки отзывчивыми

Question

Я использую класс начальной загрузки "display-2", и мне нужно сделать текст отзывчивым / уменьшенным, когда я перехожу на меньшие устройства.

Драматично заниматься

[

Answer 1

Чтобы сделать ваш текст отзывчивым, вам просто нужно использовать mediaquery в файле css.

Медиа-запрос - это метод CSS, представленный в CSS3 . Он использует правило @ media для включения блока свойств CSS, только если определенное условие выполняется.

index.html

    <div>
      <h1 class="heading">Dramaticall Engage</h1>
    </div>

style.css

    .heading{
         font-size: 30px;
      }

    @media only screen and (max-width: 768px) {

      .heading{
        font-size: 20px;
      }
    }

    @media only screen and (max-width: 425px) {

      .heading{
        font-size: 14px;
      }
    }

Answer 2

использование медиазапроса для адаптивного размера шрифтов в соответствии с размером экрана и любым содержимым.@ только экран мультимедиа и (максимальная ширина: 991 пикселей) @ экран только мультимедиа и (максимальная ширина 767 пикселей) экран только мультимедиа и (максимальная ширина: 640 пикселей) @media only screen and (max-width: 640px)