Мінімум і максимум: поняття vMin і vMax в CSS

27

Від автора: у попередній статті я розповів вам про вкрай корисні одиниці вимірювання в CSS — vw і vh. Однак є й менш відомі одиниці виміру, vmin і vmax, які погано хто розуміє. Мене це засмучує, так як у цих одиниць є по-справжньому нові способи застосування у веб-розробці.

Як я говорив у попередній статті, 1 vh дорівнює 1% від поточної висоти екрана (тобто висоті відкритого вікна браузера), а 1 vw дорівнює 1% від поточної ширини вікна. Одиниці виміру vmin і vmax працюють за тим же принципом, але з дотриманням певних правил:

Vmin використовує розмір меншої сторони. Тобто якщо висота вікна браузера менше ширини, 1 vmin буде дорівнює 1 vh. Якщо ширина браузера менше його висоти, 1 vmin дорівнює 1 vw.

Vmax використовує більшу сторону. Якщо ширина браузера більше його висоти, 1 vmax дорівнює 1 vw. Якщо висота браузера більше ширини, 1 vmax дорівнює 1 vh.

Навіщо вони потрібні?

Одиниці виміру vmin і vmax – відмінна заміна або доповнення до CSS медіа запитам щодо орієнтації екрану (@media screen and (orientation : portrait) або @media screen and (orientation : landscape)), так як вони моментально відчувають зміну співвідношення сторін вікна браузера.

Повний контроль тексту в широкоформатних банерах

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

Текст з одиницями вимірювання vw стає занадто маленьким на екранах мобільних пристроїв, а на великих моніторах – занадто великим.

Один із способів вирішення проблеми – поставити рамки з медіа запитів і задати мінімальний і максимально можливий розмір шрифту. Але такий підхід ускладнить CSS. Також можна задати font-size в одиницях виміру vmin:

h1 {
font-size: 20vmin;
font-family: Avenir, sans-serif;
font-weight: 900;
text-align: center;
}

З одиницями вимірювання vmin розмір шрифту заголовка не збільшиться і не зменшиться, якщо повністю вікно браузера раптом почне стискатися, так як одиниці виміру реагують на висоту. Однак якщо ширина стане менше висоти, іншими словами, якщо сторінка перейде в портретну орієнтацію, текст стане більше або менше. Подивитися можна в демо на CodePen.

Все найважливіше розташоване у верхній частині сторінки

Контент, розташований у верхній частині сторінки і висотою не менше 100vh буде завжди відображатись на видимій частині сторінки в браузері без прокрутки, але іноді контент може розташовуватися і уздовж великої боку вікна браузера. Якщо min-height елемента задано в vmax, то контент може відображатися крупно і в браузері, ширина вікна якого більше висоти:

header {
background: #000;
min-height: 8vmax;
}

Спосіб можна комбінувати з max-height, щоб обмежити висоту елемента на занадто великих екранах.

Можливі складності

З vmin і vmax необхідно враховувати кілька речей:

Історично склалося, що в Mobile Safari є кілька багів (які будуть вирішені в iOS 10). У Родні Рема є «buggyfill» для браузерів для вирішення цієї проблеми.

IE9 використовує vm для подання vmin, а також в даному браузері відсутня підтримка vmax. В IE підтримка нормальна.

Сподіваюся, ви зрозуміли, що у vmin і vmax є свої приголомшливі способи застосування. Сподіваюся, ви знайдете їм застосування в своїх роботах.