Уроки по CSS: що таке одиниці перегляду vw, vh, vmin і vmax

Одиниця перегляду, або, як її ще називають – довжина у відсотках від області перегляду – це адаптивна одиниця в CSS стилях, яка дозволяє визначати розміри в процентах від ширини або довжини області перегляду. Одиниці області перегляду корисно використовувати в тих випадках, коли інші відносні одиниці CSS (такі як відсотки) не справляються з поставленим завданням.

В офіційній документації W3C про ці елементи сказано дуже мало, тому в сьогоднішній статті ми розглянемо ці одиниці більш докладно. Також розглянемо, як одиниці перегляду в CSS працюють на практиці.

Висота області перегляду (vh) і ширина області перегляду (vw)

Область перегляду (viewport) позначає розмір початкового блоку. Іншими словами, область перегляду – це вся область всередині вікна браузера або будь-яка інша видима область на екрані.

Висота області перегляду (viewport height) – це відсоток від висоти фактичного вікна перегляду, який позначається одиницями vh, а ширина області перегляду (viewport width) – це відсоток від ширини фактичного вікна перегляду, який позначається одиницями vw.

Одиниці області перегляду можуть набувати значень від 0 до 100 у відповідності з наступними правилами:

100vh = 100% висоти області перегляду
1vh = 1% висоти області перегляду
100vw = 100% ширини області перегляду
1vw = 1% ширини області перегляду

Ви можете використовувати одиниці вимірювання тільки для властивостей ширини і висоти, але не для інших властивостей. Наприклад, ви не можете встановити розмір відступів (padding або margin), використовуючи одиниці vw і vh.

Відмінність одиниць перегляду від відсотків

Чим же відрізняються одиниці перегляду у відсотках від одиниць вимірювання у відсотках? Одиниці виміру у відсотках успадковують розмір свого батьківського елемента, в той час як одиниці перегляду – ні. Одиниці перегляду завжди розраховуються у вигляді відсотка від розміру області перегляду. В результаті елемент, що заданий з використанням одиниць області перегляду, може перевищувати розмір свого батьківського елемента. Це найбільша різниця.

Практичний приклад використання одиниць перегляду

Одиниці перегляду найчастіше використовуються для верстання повноекранних розділів.

Давайте розглянемо один приклад використання одиниць перегляду на практиці. Використовуваний HTML код буде досить простим: ми будемо верстати три секції (розділи) одна під іншою, і кожна з них повинна займати весь екран (але не більше).

<body>
 <section class="section_01"></section>
 <section class="section_02"></section>
 <section class="section_03"></section>
</body>

В CSS стилях ми використовуємо 100vh для значення висоти і 100% для властивості ширини розділу. Для ширини ми не використовуємо одиниці vw, оскільки за замовчуванням смуги прокрутки також додаються до розміру області перегляду. Якби ми використовували для властивості ширини значення 100vw, тоді б з’явилася горизонтальна смуга прокрутки в нижній частині вікна браузера (а це нам не потрібно).

<style>
 html {margin: 0; padding: 0;}
 section {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100vh;
 }
 .section_01 {background-image: url('https://picsum.photos/id/15/1920/1080');}
 .section_02 {background-image: url('https://picsum.photos/id/25/1920/1080');}
 .section_03 {background-image: url('https://picsum.photos/id/35/1920/1080');}
</style>

Проблему горизонтальної смуги прокрутки можна вирішити шляхом додавання overflow: auto; для кореневого елемента. Але, це рішення працює тільки частково. Горизонтальна смуга прокрутки дійсно зникає, але загальна ширина і надалі розраховується на основі ширини області перегляду (включаючи бічну прокрутку), тому елементи будуть трохи більше, ніж повинні бути.

При верстці повноекранних макетів, найголовніше завдання завжди полягало в тому, щоб встановити правильне значення висоти, а використання одиниць vh відмінно з ним справляється.

Зверстайте цей приклад, і ви побачите, що «чуйність» при використанні vh дійсно працює.

Мінімальна область перегляду (vmin) і максимальна (vmax)

Одиниці vmin і vmax дозволяють вам отримувати доступ до розміру меншої, або більшої сторони області перегляду, відповідно до наступних правил:

1vmin = 1vw або 1vh, в залежності від того, що менше
100vmin = 100vw або 100vh, в залежності від того, що менше
1vmax = 1vw або 1vh, в залежності від того, що більше
100vmax = 100vw або 100vh, в залежності від того, що більше

Для портретної орієнтації екрану 100vmin дорівнює 100vw, оскільки область перегляду менше по горизонталі, ніж по вертикалі. З тієї ж причини 100vmax буде дорівнювати 100vh.

Аналогічно, для альбомної орієнтації екрану 100vmin дорівнює 100vh, оскільки область перегляду менше по вертикалі, ніж по горизонталі. І, звичайно, 100vmax тут буде рівним 100vw.

Практичний приклад: зробити заголовок легким для читання на будь-якому екрані

Одиниці vmin і vmax ще менше відомі, ніж одиниці vw і vh. Проте, їх можна ефективно використовуватися в якості заміни для @media запитів. Наприклад, vmin і vmax можуть стати в нагоді, коли у вас є елементи, які можуть виглядати дивно при різних співвідношеннях сторін. Наприклад, заголовки h1 можуть виглядати занадто великими на мобільних пристроях і занадто маленькими на великих моніторах. До речі: тут ви знайдете інші способи маніпулювання розмірами шрифта в CSS-стилях.

Для вирішення цього завдання ви можете використовувати наступний практичний код в CSS стилях:

<style>
 h1 {font-size: 10vmin; padding: 0 1%; text-align: center;}
</style>

Підтримка одиниць перегляду браузерами

На сьогоднішній день, підтримка браузерами одиниць перегляду досить непогана. Однак врахуйте, що деякі версії IE та Edge не підтримують vmax. Крім того, у iOS 6 і 7 є проблема з одиницею vh, яка була виправлена в iOS 8 версії.

Tags: CSS3HTML5

Recent Posts

Правильний вибір якісних гральних карт

Відомо, що перші гральні карти були винайдені династією Тан в Китаї ще в 9 столітті.… Read More

15/11/2020

Як знайти нову роботу – кращі тактики

Давно минули ті часи, коли люди отримували роботу одразу ж після закінчення навчання, і залишалися… Read More

13/11/2020

Ліцензування Zoom в Україні – тарифи і ціни

Самоізоляція 2020 року поставила людей в досить суворі умови – незважаючи на вимушені карантинні заходи,… Read More

10/11/2020

Десятка найбільш хокейних міст України

Чи є в Україні хокей? Багато шанувальників цього виду спорту асоціюють гру з шайбою на… Read More

09/11/2020

Переваги б/в ноутбуків та критерії вибору техніки

Сучасний ринок комп'ютерної техніки постійно оновлюється, щорічно пропонуючи користувачам нові і більш потужні моделі ПК… Read More

03/11/2020

Найкращі водоспади світу (частина 1)

Водоспад – це одне з найбільш хвилюючих і найкрасивіших творінь матінки-природи у світі. По всьому… Read More

31/10/2020