Как сделать - адаптивный текст
Узнайте, как создать адаптивную типографику с помощью CSS.
Привет мир
Измените размер окна браузера, чтобы увидеть, как масштабируется размер шрифта.
Адаптивный размер шрифта
Размер текста можно задать с помощью 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>
Viewport — это размер окна браузера. 1vw = 1% ширины области просмотра. Если окно просмотра имеет ширину 50 см, 1vw составляет 0,5 см.
Изменить размер шрифта с помощью медиа-запросов
Вы также можете использовать медиа-запросы для изменения размера шрифта элемента на определенных размерах экрана:
Переменный размер шрифта.
Пример
/* 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 .