Как сделать адаптивный текст css

Адаптивный текст

Здесь вы узнаете, как сделать адаптивную типографику при помощи CSS.

Привет, мир!

Измените размер окна браузера, чтобы увидеть, как масштабируется текст.

Адаптивный размер шрифта

Размер шрифта можно установить при помощи единиц измерения vw , что означает "ширина области просмотра" (англ. viewport width).

Данный способ позволяет установить, чтобы размер теста следовал за размером окна браузера:

Пример

Область просмотра или вьюпорт (viewport) – это размер окна браузера. 1vw = 1% ширины области просмотра. Если ширина области просмотра составляет 50см, то 1vw = 0.5см.

Изменение размера шрифта при помощи медиа-запросов

Также для изменения размера шрифта элемента для определенных размеров экрана, можно использовать медиа-запросы.

Hello World

Resize the browser window to see how the font size scales.

Отзывчивый размер шрифта

Размер текста может быть установлен с помощью vw единицы, что означает "ширина видового экрана".

Таким образом размер текста будет следовать размеру окна браузера:

Пример

Видовой экран — это размер окна обозревателя. 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 запросам.

Отзывчивый шрифт. Адаптация текста между макетным и минимальным значениями

Адаптивный или отзывчивый шрифт — это мечта любого веб-разработчика. Я пересмотрел множество вариантов реализации, посидел вечерок и вывел для себя надежный работающий вариант. Им и хочу с тобой поделиться. Бонус SCSS миксин!

Итак, задача. Указывать значение по макету, а также минимальное значение при котором текст или заголовок хорошо бы смотрелся на мобильных устройствах, например iPhone 5 (320px). При этом шрифт бы адаптировался, увеличиваясь либо уменьшаясь в зависимости от ширины экрана.

Берем исходные значения из макета, к примеру заголовок H1 размером 40px. Так же нам нужна ширина всего полотна макета, к примеру 1280px.

Для получения минимального значения шрифта верстаем заголовок по макету и, с помощью средств разработчика Chrome (F12) выбираем нужный минимальный размер экрана и подбираем размер шрифта меняя значение пока текст не будет выглядеть адекватно. У меня получилось 24px

После этого в CSS, вместо font-size: 40px; пишем следующее.

Где 24px это наш минимальный шрифт, 16 – разница между шрифтом по макету 40 и минимальным шрифтом 24 (40-24 = 16). 100vw – это полная текущая ширина вьюпорта (экрана) 1280 – это ширина макета.

Тестируем и получаем отзывчивый шрифт, который полностью соответствует размеру по макету.

Но, на размере в 320px мы не увидим желаемого результата, а именно шрифта размером 24px. Это связано с тем, что мы никак не указали минимальный размер экрана именно в 320px.

Для решения ситуации пишем медиа запрос для 767px, и внутри меняем формулу:

Тут мы отнимаем 320px от полной ширины вьюпорта, а так же к добавочному числу 16 мы прибавляем еще его 70% (16 + 16 * 0.7)

Проверяем и видим полное соответствие поставленной задаче! При этом переход в брейк поинте сделан бесшовно и не заметно!

Конечно же мы можем закрыть все это в SCSS миксин:

И подключать следующим образом:

Можно и вовсе избавиться от медиа запроса:

Буду рад прочесть в комментариях чем еще можно улучшить это решение. Спасибо за внимание!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *