Узнать, как создать адаптивную типографику используя HTML, 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 Медиа запросы.