Обычно мы говорим об отзывчивом дизайне и изображениях в Интернете. А задумывались ли вы о том, чтобы сделать шрифты, основную часть веб-сайта, отзывчивыми? Не волнуйтесь, если нет, в этой статье я расскажу, как можно динамически изменять размер любого шрифта на вашем сайте.
Итак, давайте начнем
Обычно мы задаем размер шрифта следующим образом font-size: 80px;. Здесь единицей измерения размера шрифта является пиксель, то есть px. Вот как это будет выглядеть, если вы попытаетесь изменить размер шрифта с единицей измерения px.
.container{
font-size: 80px;
}
Давайте сделаем шрифты отзывчивыми
Чтобы сделать шрифты отзывчивыми, мы должны работать с новой единицей CSS под названием — vw. vw означает ширину области просмотра, которая является относительной к 1% ширины области просмотра.
Давайте возьмем пример выше и изменим font-size на 5vw и посмотрим на волшебство 🤩.
.container{
font-size: 8vw;
}
Попробуйте изменить размер окна браузера с помощью этой ручки
Заключение
Надеюсь, эта статья была полезной для вас! Спасибо, что прочитали!
Давайте подключаться
- GitHub
Если вы нашли мой контент полезным и хотите поблагодарить меня, не стесняйтесь, угостите меня кофе 🙂
Хорошего дня!