Керівництво по CSS Viewport Одиниці vw, vh, vmin, vmax

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

Хоча Документація W3C на оглядових одиницях є все, що можна ввести в теорію, це не дуже багато. Отже, у цій статті ми розглянемо, як ці CSS-одиниці на практиці.

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

W3C визначає вікно перегляду як “розмір початкового містить блок”. Іншими словами, область перегляду - це область у вікні браузера або будь-яку іншу область перегляду на екрані.

The vw і vh одиниць позначають відсоток ширини і висоти фактичного вікна перегляду. Вони можуть приймати значення від 0 до 100 відповідно до таких правил:

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

Відмінності у відсоткових одиницях

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

Приклад: Повноекранні розділи

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

The HTML досить простий; ми просто маємо три секції один під одним і ми хочемо, щоб кожен з них накрийте весь екран (але не більше).

У CSS ми використовуємо 100vh як висота значення і 100% як ширина. Ми не використовуємо vw тут, як за замовчуванням, також додаються смуги прокручування до розміру вікна перегляду. Отже, якщо ми використали ширина: 100vw; правило a горизонтальна смуга прокрутки з'явиться на внизу вікна браузера.

 * margin: 0; заповнення: 0;  розділ розмір фону: обкладинка; фонове положення: центр; ширина: 100%; висота: 100вч;  .section-1 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg');  .section-2 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg');  .section-3 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg');  

На нижченаведеному показі gif ви можете побачити це vh є дійсно чуйний блок.

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

Я б сказав, що не смію використовувати vw блок визначення розміру повноекранних елементів з цієї причини. Нам навіть не потрібно, як ширина: 100%; правило працює відмінно. З повноекранними макетами справжнім завданням завжди було те, як це зробити встановити правильне значення висоти і vh блок дає блискуче рішення для цього.

Інші випадки використання

Якщо вас цікавить інші випадки використання vw і vh Lullabot має велику статтю, яка перераховує a кілька прикладів реального життя (з кодами Codepen), наприклад:

• Картки з фіксованим співвідношенням.
• Зберігати елемент коротше, ніж екран.
• Масштабування тексту.
• Вихід з контейнера.

Opera.dev також має короткий підручник про те, як ви можете скористатися важелем vw одиниця в створення чуйної типографіки.

Не можна використовувати лише одиниці вікна перегляду на ширина і висота властивості, але на будь-який інший. Наприклад, ви можете встановити розмір прокладок і полів за допомогою vw і vh одиниць.

Мін.vmin) & viewport max (vmax)

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

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

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

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

Приклад: Зробіть тексти героїв читабельними на кожному екрані

The vmin і vmax одиниці набагато менш широко відомі, ніж vw і vh. Однак вони можуть бути чудово використані як a замінити орієнтацію @media запитів. Наприклад, vmin і vmax може стати в нагоді, коли є елементи, які можуть виглядати дивно при різних пропорціях.

Новий код має чудовий посібник, в якому вони обговорюють, як ви можете зберегти текст для читання героя на кожному екрані, використовуючи vmin одиниці. Тексти героїв схильні виглядати занадто малий на мобільних пристроях і занадто великий на великих моніторах.

Ось основна ідея їх вирішення:

 h1 розмір шрифту: 20vmin; сімейство шрифтів: Avenir, sans-serif; шрифт-вага: 900; text-align: center;  

У демонстраційному коді Codepen можна дізнатися, як це зробити vmin вирішує проблему читаності текстів героя. Доступ до “Повна сторінка” потім на Codepen змініть розмір вікна веб-переглядача як горизонтально, так і вертикально, щоб побачити, як змінюється текст героя.

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

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