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