Відносні одиниці вимірювання vh, vw, vmin, vmax

1. підтримка браузерами
2. 1. Одиниці vh і vw
3. 1.1. Адаптивне повноекранне фонове зображення
4. 1.2. Ефект Повносторінкове слайда
5. 2. Одиниці vmin і vmax

В CSS3 були додані нові відносні одиниці виміру, такі як vh, vw, vmin, vmax. Ці одиниці обчислюються щодо розмірів вікна браузера. Для настільних комп'ютерів ширина вікна браузера більше ширини області перегляду (додається ширина скроллбар), тому якщо для елемента встановити ширину 100vw, то він вийде за межі html.

Мал. 1. Повноекранне фонове зображення з шириною 100vw

підтримка браузерами

IE: 9.0 крім vmax, замість vmin використовуйте vm
Edge: 12.0 крім vmax, замість vmin використовуйте vm
Firefox: 19.0
Chrome: 26.0
Opera: 15.0
Safari: 6.1
iOS Safari: 8.0
Android 4.4
Chrome for Android: 55.0

Таблиця 1. Відносні одиниці вимірювання Одиниця Опис vh Еквівалентно 1% висоти вікна браузера. vw Еквівалентно 1% ширини вікна браузера. vmin Еквівалентно 1% меншого розміру вікна браузера по висоті або ширині. vmax Еквівалентно 1% більшого розміру вікна браузера по висоті або ширині.

1. Одиниці vh і vw

Прийоми чуйного веб-дизайну базуються на використанні процентних значень. Але відсотки далеко не найкраще рішення для кожного випадку, так як вони обчислюються щодо розмірів найближчого батьківського елемента. Тому, якщо ви хочете використовувати висоту і ширину вікна браузера, краще скористатися одиницями vh і vw. Наприклад, якщо висота вікна браузера дорівнює 900px, то 1vh буде дорівнює 9px. Аналогічно, якщо ширина вікна браузера дорівнює 1600px, то 1vw буде дорівнює 16px.

1.1. Адаптивне повноекранне фонове зображення

Так як ширина елемента, зазначена за допомогою 100vw більше ширини області перегляду, то для створення повноекранних фонових зображень краще використовувати ширину 100%, яка буде дорівнює ширині кореневого елемента html.

.fullscreen-bg {background: url (image.jpg); background-position: center; background-size: cover; width: 100%; height: 100vh; } Мал. 2. Адаптивно повноекранне фонове зображення

1.2. Ефект Повносторінкове слайда

Щоб зробити блок на всю висоту вікна браузера, необхідно задати height: 100%; для трьох елементів - html, body і безпосередньо для самого блоку:

html, body {height: 100%; } Section {height: 100%; }

Так як процентні розміри обчислюються щодо значень батьківських елементів, то необхідно встановити відповідні значення для кожного елемента DOM. Одиниця виміру vh не вимагає установки значень по ланцюжку, так як її значення обчислюється безпосередньо щодо вікна браузера:

section {height: 100vh; }

Ефект перегортання слайдів при кліці на стрілку реалізується за допомогою невеликого скрипта jQuery:

jQuery (document) .ready (function ($) {$ ( 'nav'). on ( 'click', function () {if ($ (this) .hasClass ( 'down')) {var movePos = $ (window ) .scrollTop () + $ (window) .height ();} if ($ (this) .hasClass ( 'top')) {var movePos = $ (window) .scrollTop () - $ (window) .height ( );} $ ( 'html, body'). animate ({scrollTop: movePos}, 600);});});

See the Pen aBxxGv by Elena ( @ html5book ) on CodePen .

Висоту, задану за допомогою vh також можна використовувати для вирівнювання елемента по центру сторінки:

body {margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; }

Тепер будь-який елемент буде розташований строго по центру без будь-яких додаткових прийомів.

See the Pen NbmJad by Elena ( @ html5book ) on CodePen .

2. Одиниці vmin і vmax

У той час, як одиниці vh і vw завжди обчислюються щодо відповідних розмірів вікна браузера, vmin і vmax визначаються мінімальним або максимальним значенням висоти або ширини. Наприклад, якщо ширина вікна браузера дорівнює 1200px, а висота 700px, то vmin буде дорівнює 7px, а vmax - 12px.

Мал. 3. Одиниці vmin і vmax