Как сделать отзывчивый размер шрифта в CSS?

Обычно мы говорим об отзывчивом дизайне и изображениях в Интернете. А задумывались ли вы о том, чтобы сделать шрифты, основную часть веб-сайта, отзывчивыми? Не волнуйтесь, если нет, в этой статье я расскажу, как можно динамически изменять размер любого шрифта на вашем сайте.

Итак, давайте начнем

Обычно мы задаем размер шрифта следующим образом font-size: 80px;. Здесь единицей измерения размера шрифта является пиксель, то есть px. Вот как это будет выглядеть, если вы попытаетесь изменить размер шрифта с единицей измерения px.

.container{
     font-size: 80px;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Давайте сделаем шрифты отзывчивыми

Чтобы сделать шрифты отзывчивыми, мы должны работать с новой единицей CSS под названием – vw. vw означает ширину области просмотра, которая является относительной к 1% ширины области просмотра.

Давайте возьмем пример выше и изменим font-size на 5vw и посмотрим на волшебство 🤩.

.container{
     font-size: 8vw;
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Попробуйте изменить размер окна браузера с помощью этой ручки

Заключение

Надеюсь, эта статья была полезной для вас! Спасибо, что прочитали!

Давайте подключаться

  • Twitter
  • GitHub

Если вы нашли мой контент полезным и хотите поблагодарить меня, не стесняйтесь, угостите меня кофе 🙂

Хорошего дня!

Оцените статью
Procodings.ru
Добавить комментарий