Від автора: з першого показу вьюпорт одиниць в CSS минуло кілька років. Це реально адаптивні одиниці вимірювання довжини, їх значення змінюється під розміри вікна браузера. Якщо ви чули про них, але ніколи не вдавалися в деталі, ця стаття для вас.
Одиниці вимірювання та їх значення
В CSS є 4 типи вьюпорт одиниць: vh, vw, vmin і vmax.
Viewport height (vh) – засновані на висоті вьюпорта. Значення 1vh дорівнює 1% висоти вьюпорта.
Viewport width (vw) – засновані на ширині вьюпорта. Значення 1vw дорівнює 1% ширини вьюпорта.
Viewport minimum (vmin) – засновані на мінімальній стороні вьюпорта. Якщо висота вьюпорта менше ширини, значення 1vmin буде дорівнює 1% від висоти. Точно так само якщо ширина менше висоти, то 1vmin буде дорівнює 1% від ширини вьюпорта.
Viewport maximum (vmax) – засновані на великій стороні вьюпорта. Якщо висота вьюпорта більше ширини, то значення 1vmax буде дорівнює 1% від висоти вьюпорта. Якщо ширина вьюпорта більше висоти, то 1vmax буде дорівнює 1% від ширини.
Давайте подивимося, які значення ми отримаємо в різних ситуаціях:
Якщо вьюпорт 1200 px в ширину і 1000px у висоту, то значення 10vw буде одно 120px, а 10vh – 100px. Ширина вьюпорта більше висоти, тому 10vmax буде одно 120px, а 10vmin – 100px.
Якщо повернути пристрій, щоб ширина стала 1000px, а висота 1200 px, то 10vh буде одно 120px, а 10vw перетвориться в 100px. Цікаво, але 10vmax так і залишиться 120px, тому що тепер значення визначається по висоті вьюпорта. Значення 10vmin також залишиться 100px.
Якщо звузити вікно браузера до 1000px в ширину і 800px у висоту, то 10vh буде 80px, а 10vw буде 100px. Точно так само значення 10vmax стане 100px, і 10vmin – 80px.
На даний момент вьюпорт одиниці для вас можуть сильно відрізнятися від відсотків, однак різниця велика. У випадку з відсотками ширина і висота дочірніх елементів залежать від батьківського блоку. Приклад:
У демо видно, як ширина першого дочірнього елемента займає 80% ширини від батьків. У другого дочірнього елемента ширина дорівнює 80vw, що робить його ширше батьків.
Застосування вьюпорт одиниць вимірювання
Ці одиниці засновані на розмірах вьюпорта, тому їх дуже зручно використовувати в ситуаціях, коли ширина, висота або розміри елементів повинні змінюватися в залежності від розмірів вьюпорта.
Повноекранні фонові зображення та секції
У мережі досить часто можна зустріти фонові зображення на елементах, які займають весь екран. Точно так само можна зробити в дизайні сайту, щоб окрема секція про товар або послугу займала весь екран. У таких випадках можна задати ширину елементів у 100%, а висоту 100vh.
Розглянемо наступний приклад HTML:
a
CSS нижче розтягне секцію під фонове зображення на всю ширину:
.fullscreen {
width: 100%;
height: 100vh;
padding: 40vh;
}
.a {
background: url(‘path/to/image.jpg’) center/cover;
}
Ідеально відповідні заголовки
Ви могли чути або навіть використовувати jQuery плагін FitText. За допомогою цього плагіна можна масштабувати заголовки таким чином, щоб вони займали всю ширину батьківського елемента. Як я сказала раніше, значення вьюпорт одиниць безпосередньо залежить від розмірів вьюпорта. Тобто якщо вказувати font-size заголовків у вьюпорт одиницях, то вони ідеально підходитимуть під кожен екран. Якщо зміниться ширина вьюпорта, браузер автоматично змінить назву. Потрібно лише визначити правильне початкове значення для font-size.
Головна проблема з font-size та вьюпорт одиницями полягає в тому, що розмір тексту буде сильно варіюватися в залежності від вьюпорта. Наприклад, font-size зі значенням 8vw зробить заголовок розміром в 96px для вьюпорта з шириною 1200 px, 33px для ширини 400px і 154px для ширини вьюпорта в 1920px. Шрифт може бути занадто великим, так і занадто маленьким для зручного читання. Більш докладно прочитати про правильне встановлення розмірів тексту за допомогою одиниць виміру і функції calc() можна в чудовій статті про типографіці на вьюпорт одиницях.
Легке центрування елементів
Вьюпорт одиниці можуть дуже сильно допомогти, коли необхідно помістити елемент точно в центр екрану користувача. Якщо висота елемента відома, то потрібно всього лише поставити верхнє і нижнє значення властивості margin [(100 – height)/2]vh.
.centered {
width: 60vw;
height: 70vh;
margin: 15vh auto;
}
Що потрібно пам’ятати
Якщо ви вирішили використовувати вьюпорт одиниці в своїх проектах, вам потрібно пам’ятати про декілька речей.
Акуратніше задавайте ширину елемента з допомогою вьюпорт одиниць. Якщо кореневий елемент властивість overflow задано в auto, браузери вирішать, що смуги прокрутки немає. Це зробить елементи злегка ширше очікуваного. Розберемо приклад з 4 блоками div з наступними стилями:
div {
height: 50vh;
width: 50vw;
float: left;
}
…зазвичай нам потрібно, щоб кожен div займав чверть екрану. Однак ширина div ів обчислюється з умовою, що немає смуги прокручування, що робить div и трохи ширше, ніж потрібно.
Проблема вирішиться, якщо ширину поставити на 50%. Висновок – використовуйте відсотки для встановлення ширини блокових елементів, щоб смуга прокрутки не втручалася в обчислення ширини блоків.
Схожа проблема може виникати на мобільних пристроях з-за адресного рядка, яка з’являється і зникає в залежності від прокручування сторінки. Це змінить висоту вьюпорта, і користувач помітить різкий стрибок при перегляді вмісту.
Підтримка в браузерах
За даними з сайту caniuse вьюпорт одиниці підтримуються у всіх основних браузерах. Однак вам потрібно знати, що парочка помилок і проблем ще не вирішено. Наприклад, IE9 підтримує vm замість vmin, а IE10+/Edge не підтримують vmax. Chrome не друкує елементи, чиї розміри задані під вьюпорт одиницях.
Якщо копнути трохи глибше, то на Caniuse можна подивитися підтримку браузерів в різних регіонах. Наприклад, 97,5% людей в США використовують браузери з підтримкою вьюпорт одиниць. В Азії ж значення падає до 73,76% і до 45,28% в Індії. Низький відсоток в Індії обумовлений тим, що безліч людей для зберігання даних використовують UC Browser. Ця інформація повинна допомогти вам у прийнятті рішення, використовувати вьюпорт одиниці в своїх проектах або немає.
Висновок
У цій статті ми коротко пройшлись по значенню, застосування та підтримки вьюпорт одиниць. Якщо вам відомі інші цікаві способи застосування або проблеми в браузерах, пишіть в коментарях.
