Клавиша / esc

sv, lv, dv

Новый подход к единицам измерения относительно размеров окна браузера.

Время чтения: меньше 5 мин

С 2013 года браузеры поддерживают единицы измерения vw, vh, vmin, vmax, которые позволили задавать размер элементам относительно размеров окна браузера (viewport). Однако устройства и их экраны эволюционировали.

Одной из распространённых проблем, с которой сталкиваются разработчики сегодня это изменение размера 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;}
          .vh {
  min-height: 100vh;
}

.dvh {
  min-height: 100dvh;
}

        
        
          
        
      

Демо нужно смотреть на мобильном телефоне, чтобы увидеть разницу.

Открыть демо в новой вкладке

Наименьший вьюпорт

Скопировано

svw

Скопировано

Размер указывается в процентах от ширины вьюпорта (viewport width). 100svw соответствует полной ширине вьюпорта со всеми открытыми элементами браузера. 1svw = 1% ширины вьюпорта.

svh

Скопировано

Размер в процентах от высоты вьюпорта (viewport height). 100svhсоответствует полной высоте вьюпорта со всеми открытыми элементами браузера. 1svh = 1% высоты вьюпорта.

svmin

Скопировано

Размер в процентах от меньшей размерности вьюпорта со всеми открытыми элементами браузера. Если высота меньше ширины (например, горизонтальная ориентация телефона), то расчёт будет вестись относительно высоты.

svmax

Скопировано

Размер в процентах от большей размерности вьюпорта со всеми открытыми элементами браузера. Если высота больше ширины (например, нормальная ориентация телефона), то расчёт будет вестись относительно высоты.

Пример работы единиц sv

Наибольший вьюпорт

Скопировано

lvw

Скопировано

Размер указывается в процентах от ширины вьюпорта (viewport width). 100lvw соответствует полной ширине вьюпорта со всеми закрытыми элементами браузера. 1lvw = 1% ширины вьюпорта.

lvh

Скопировано

Размер в процентах от высоты вьюпорта (viewport height). 100lvhсоответствует полной высоте вьюпорта со всеми закрытыми элементами браузера. 1lvh = 1% высоты вьюпорта.

lvmin

Скопировано

Размер в процентах от меньшей размерности вьюпорта со всеми закрытыми элементами браузера. Если высота меньше ширины (например, горизонтальная ориентация телефона), то расчёт будет вестись относительно высоты.

lvmax

Скопировано

Размер в процентах от большей размерности вьюпорта со всеми закрытыми элементами браузера. Если высота больше ширины (например, нормальная ориентация телефона), то расчёт будет вестись относительно высоты.

Пример работы единиц lv

Динамический вьюпорт

Скопировано

dvw

Скопировано

Размер указывается в процентах от ширины вьюпорта (viewport width). 100dvw соответствует полной ширине вьюпорта и динамически пересчитывается при открытии/закрытии элементов браузера. 1dvw = 1% ширины вьюпорта.

dvh

Скопировано

Размер в процентах от высоты вьюпорта (viewport height). 100dvhсоответствует полной высоте вьюпорта и динамически пересчитывается при открытии/закрытии элементов браузера. 1dvh = 1% высоты вьюпорта.

dvmin

Скопировано

Размер в процентах от меньшей размерности вьюпорта и динамически пересчитывается при открытии/закрытии элементов браузера. Если высота меньше ширины (например, горизонтальная ориентация телефона), то расчёт будет вестись относительно высоты.

dvmax

Скопировано

Размер в процентах от большей размерности вьюпорта и динамически пересчитывается при открытии/закрытии элементов браузера. Если высота больше ширины (например, нормальная ориентация телефона), то расчёт будет вестись относительно высоты.

Пример работы единиц dv