Как сделать - Отзывчивый текст
Узнать, как создать адаптивную типографику с помощью CSS.
Отзывчивый текст
Привет мир
Измените размер окна браузера, чтобы увидеть, как масштабируется размер шрифта.
Адаптивный размер шрифта
Размер текста может быть установлен с помощью единици vw
, что означает, что "ширина видового экрана".
Таким образом, размер текста будет соответствовать размеру окна браузера:
Пример
<h1 style="font-size:8vw;">Привет мир</h1>
<p style="font-size:2vw;">Измените размер окна браузера, чтобы увидеть, как масштабируется размер шрифта.</p>
Редактор кода »Видовой экран - это размер окна браузера. 1vw = 1% от ширины видового экрана. Если видовой экран имеет ширину 50cm, то 1vw составляет 0,5cm.
Изменение размера шрифта с помощью медиа запросов
Вы также можете использовать медиа запросы для изменения размера шрифта элемента на определенных размерах экрана:
Изменяемый шрифт.
Пример
/* Если размер экрана 601px широкий или больше, установите размер шрифта <div> равным 80px */
@media screen and (min-width: 601px) {
div.example {
font-size: 80px;
}
}
/* Если размер экрана составляет 600 пикселей в ширину или меньше, установите размер шрифта <div> равным 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
Редактор кода »Совет: Зайдите на наш учебник CSS Шрифт, чтобы узнать больше о шрифтах.
Чтобы узнать больше о медиа запросах, читайте наш учебник CSS Медиа запросы.