Що таке vh, vw, vmin та vmax у CSS

Одиниці Вікна: vh, vw, vmin, vmax

Ці одиниці CSS базуються на розмірах вікна. Це корисно для створення адаптивних, "рідких" макетів.

Огляд одиниць

Одиниця	Значення	Значення
`1vh`	1% від висоти вікна	Висота в 1/100 від `viewport height`
`1vw`	1% від ширини вікна	Ширина в 1/100 від `viewport width`
`1vmin`	1% від меншого значення між `vh` або `vw`	Мінімум ширини/висоти
`1vmax`	1% від більшого значення між `vh` або `vw`	Максимум ширини/висоти

Приклад

css

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

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

Застосування

vh і vw — для повноекранних секцій, блоків, слайдів.
vmin — щоб блоки не перевищували меншу сторону.
vmax — для створення елементів, які розтягуються вздовж більшої сторони (наприклад, в горизонтальному макеті).

Важливо для Мобільних Пристроїв

Мобільні браузери змінюють висоту vh при показі/сховуванні адресного рядка. Щоб вирішити цю проблему:

Використовуйте CSS змінні з JavaScript:

javascript

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

css

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

Порада:

Використовуйте vmin/vmax для адаптивних шрифтів, відступів та масштабування інтерфейсу, особливо якщо не хочете прив'язуватися лише до ширини або висоти екрану.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань

Що таке vh, vw, vmin та vmax у CSS

#Одиниці Вікна: vh, vw, vmin, vmax

#Огляд одиниць

#Приклад

#Застосування