Как создать: респонсивный текст

Узнайте, как использовать CSS для создания респонсивного форматирования.

Hello World

Измените размер окна браузера, чтобы увидеть, как изменяется размер шрифта.

Просмотрите эффект

Респонсивный размер шрифта

Размер текста можно изменить с помощью vw Единицы измерения, означающие «ширина видимой области».

Таким образом, размер текста будет следовать за размером окна браузера:

<h1 style="font-size:8vw;">Hello World</h1>
<p style="font-size:2vw;">Измените размер окна браузера, чтобы увидеть, как изменяется размер шрифта.</p>

Попробуйте сами

Примечание:видимая область — это размер окна браузера.1vw = 1% от ширины видимой области. Если ширина видимой области 50 см, то 1vw в 0,5 см.

Изменение размера шрифта с помощью медиа-запросов

Вы также можете использовать медиа-запросы для изменения размера шрифта элементов на определенном экране:

Изменяемый размер шрифта.

Просмотрите эффект

/* Если ширина экрана составляет 601px или больше, установите размер шрифта <div> в 80px */
@media screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}
/* Если ширина экрана составляет 600px или меньше, установите размер шрифта <div> в 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Попробуйте сами

Связанные страницы

Учебник:CSS шрифты

Учебник:CSS медиа-запросы