sv, lv, dv

С 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;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

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

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

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

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

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

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

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

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

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

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

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