Как сделать - адаптивный текст
Узнайте, как создать адаптивный текст с помощью CSS.
Hello World
Resize the browser window to see how the font size scales.
Отзывчивый размер шрифта
Размер текста может быть установлен с помощью vw
единицы, что означает "ширина видового экрана".
Таким образом размер текста будет следовать размеру окна браузера:
Пример
<h1 style="font-size:8vw;">Hello World</h1>
<p
style="font-size:2vw;">Resize the browser window to see how the font size
scales.</p>
Видовой экран — это размер окна обозревателя. 1ВВ = 1% ширины видового экрана. Если видовой экран шириной 50 см, 1ВВ составляет 0.5 cm.
Изменение размера шрифта с помощью запросов мультимедиа
Можно также использовать запросы мультимедиа для изменения размера шрифта элемента на определенных размерах экрана:
Variable Font Size.
Пример
/* If the screen size is 601px wide or
more, set the font-size of <div> to 80px */
@media screen and (min-width:
601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px wide or less,
set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
Совет: Перейдите на наш CSS шрифт учебник, чтобы узнать больше о шрифтах.
Подробнее о мультимедийных запросах читайте в нашем учебнике по CSS Media запросам.