Одиниці vw і vh у CSS
Одиниці vw і vh дозволяють задавати розміри елементів відносно ширини та висоти області перегляду браузера.
Що таке viewport
Viewport — це видима область вебсторінки у вікні браузера. Її розмір залежить від ширини та висоти вікна браузера або екрана пристрою.
Одиниця vw
Одиниця vw означає 1% ширини області перегляду. Наприклад, 50vw дорівнює половині ширини viewport.
div { width: 50vw; }Одиниця vh
Одиниця vh означає 1% висоти області перегляду. Наприклад, 50vh дорівнює половині висоти viewport.
div { height: 50vh; }Використання vw і vh разом
Одиниці vw і vh можна використовувати одночасно. Наприклад, можна задати елементу ширину, яка залежить від ширини viewport, і висоту, яка залежить від його висоти.
div { width: 50vw; height: 50vh; margin: 30px auto; border: 1px solid red; }Практичне завдання
Практичне завдання 1
- Дано div.
- Задайте йому верхній відступ, який дорівнює 30% висоти області перегляду.
<div>text</div>💡 Показати підказку
Для відступу зверху використовується властивість margin-top. Оскільки значення потрібно взяти від висоти viewport, використовуйте vh.
✅ Показати відповідь
div { margin-top: 30vh; }Практичне завдання 2
- Дано div.
- Задайте йому ширину та висоту, які дорівнюють 70% ширини області перегляду.
<div>text</div>💡 Показати підказку
В умові обидва значення потрібно розраховувати від ширини viewport, тому для обох властивостей використовуйте vw.
✅ Показати відповідь
div { width: 70vw; height: 70vw; }Запам'ятайте: vw залежить від ширини viewport, а vh — від його висоти. 1vw — це 1% ширини, а 1vh — 1% висоти області перегляду.