Что такое vh, vw, vmin и vmax в CSS

Viewport-единицы: vh, vw, vmin, vmax

Эти CSS-единицы основаны на размерах области просмотра (viewport). Это полезно для создания адаптивной, "резиновой" вёрстки.

Обзор единиц

Пример

.box {
  width: 50vmin;   /* будет 50% от меньшей стороны окна */
  height: 50vmax;  /* будет 50% от большей стороны окна */
  background: lightcoral;
}

Такой блок будет адаптироваться под ориентацию экрана: при повороте устройства меняются vmin/vmax.

Применение

• vh и vw — для полноэкранных секций, блоков, слайдов.
• vmin — чтобы блоки не выходили за пределы меньшей стороны.
• vmax — для создания элементов, которые растягиваются по большей стороне (например, при горизонтальной вёрстке).

Важно для мобильных

• Мобильные браузеры изменяют высоту vh, когда показывают/скрывают адресную строку. Чтобы решить эту проблему:

Используйте CSS-переменные с JavaScript:

document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);

.full-height {
  height: calc(var(--vh, 1vh) * 100);
}