Одной из распространённых проблем, с которой сталкиваются разработчики сегодня это изменение размера viewport на мобильных устройствах. Было бы логичным полагать, что 100vh или 100% высоты экрана означали высоту, равную высоте экрана устройства, но vh не учитывает адресную строку и навигационную панель браузера на мобильных устройствах. Поэтому иногда высота контента оказывается слишком большой и появляется лишний скролл.
Это относительные единицы измерения, пришедшие на помощь знакомым vw, vh, vmin, vmax, с целью сделать процесс разработки более предсказуемым. svw и svh представляет собой наименьшую (smallest) ширину и высоту экрана с учётом элементов браузера, lvw и lvh — наибольшую (largest) ширину и высоту с учётом элементов браузера. dvw и dvh динамически (dynamic) высчитывает размер экрана при различных состояниях браузера, при открытой/закрытой адресной строке и навигационной панели браузера.
Пример
Ширина первого экрана будет равна 100% ширины вьюпорта, а высота — 100% высоты вьюпорта, причём размер будет динамически высчитываться при открытии/закрытии элементов браузера:
.vh {
min-height: 100vh;
}
.dvh {
min-height: 100dvh;
}Динамический вьюпорт
dvw
Размер указывается в процентах от ширины вьюпорта (viewport width). 100dvw соответствует полной ширине вьюпорта и динамически пересчитывается при открытии/закрытии элементов браузера. 1dvw = 1% ширины вьюпорта.
dvh
Размер в процентах от высоты вьюпорта (viewport height). 100dvhсоответствует полной высоте вьюпорта и динамически пересчитывается при открытии/закрытии элементов браузера. 1dvh = 1% высоты вьюпорта.
dvmin
Размер в процентах от меньшей размерности вьюпорта и динамически пересчитывается при открытии/закрытии элементов браузера. Если высота меньше ширины (например, горизонтальная ориентация телефона), то расчёт будет вестись относительно высоты.
dvmax
Размер в процентах от большей размерности вьюпорта и динамически пересчитывается при открытии/закрытии элементов браузера. Если высота больше ширины (например, нормальная ориентация телефона), то расчёт будет вестись относительно высоты.
👉 @frontendInterview
