Как использовать vw и vh для Заголовка в адаптивной верстке

Как использовать vw и vh для Заголовка в адаптивной верстке 0

Если у нас есть большой заголовок (или заголовок с блоком) и нам нужно, чтобы этот очень большой заголовок с размером 60px, смотрелся на

всех устройствах одинаково?

 

Высчитываем по формуле vw:

vw 1 сотая ширины.
Для шрифта в 60px мы должны узнать этот размер в vw.
Для этого, мы должны взять 12px это размер шрифта по умолчанию, умножить его на число, что бы получилось 60, а в нашем случае это число будет 5 и получаем 5vw (font-size: 5vw; = font-size: 60px;)

 
Высчитываем по формуле vh:
vh 1 сотая высоты.
Если наш текст с блоком...
Берем Ширину экрана, делим ширину экрана на 100 и умножаем на 5 (где 5 это число нашего vw — шрифта), получаем высчитанный розмер (шрифта), высоты.

 
Все эти действия, помогут нам закрыть все лишние медиа (@media) запросы.

 

Авторское право:
+1
180
RSS
Нет комментариев. Ваш будет первым!
Загрузка...