Перейти к содержанию

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


AndrewPro

Рекомендуемые сообщения

  • Админ

1 x4A1kpLEJs8GFA4gXC3eJg.png

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

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

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

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

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

Telegram сайта  "Типичный социум"

Do not be indifferent. Support for motivation to continue on to engage in this further! Thanks

img.png

Ссылка на комментарий
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.
Примечание: Ваш пост будет проверен модератором, прежде чем станет видимым.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

Обжалование или подача апелляции на снятие Бана в группе "Типичный Социум IT!
Заявки и обжалование отправлять в Телеграм bot @ModeratorTS_Bot


×
×
  • Создать...

Важная информация

Мы разместили cookie-файлы на ваше устройство, чтобы помочь сделать этот сайт лучше. Вы можете изменить свои настройки cookie-файлов, или продолжить без изменения настроек.Политика конфиденциальности

Write what you are looking for and press enter or click the search icon to begin your search

-->