Неочікувана потужність Viewport Units в CSS

4 хв. читання

Часи дизайнів з фіксованою шириною минули. Ми живемо у світі пристроїв різних розмірів і пропорцій. Блоки, або юніти (units), які використовують відсоткові значення, мають набір можливих способів відображення контенту, але працюють не в кожному сценарії. Viewport percentage units, або скорочено «viewport units», пропонують так зване «текуче» (тобто, змінне) значення для ситуацій, коли блоки, що використовують відсотки, не підходять. Наприклад, viewport units будуть корисними при спробі створити певну кількість елементів з рівною шириною/висотою.

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

Подивимось на синтаксис:

Неочікувана потужність Viewport Units в CSS
vw
Неочікувана потужність Viewport Units в CSS
vh
Неочікувана потужність Viewport Units в CSS
vmin
Неочікувана потужність Viewport Units в CSS
vmax

Знаючи основну термінологію, розглянемо приклади.

Фіксовано-пропорційні блоки

Ми використаємо Flexbox для планування ширини наших елементів. Процентне співвідношення тут не підійде. Неможливо розрахувати висоту елементів динамічно, адже число елементів в списку впливає на висоту свого контейнера. Аналогічного результату можна досягнути з внутрішніми коефіцієнтами. Але з viewport units, ми отримуємо той же ефект з меншою кількістю коду і без необхідності використовувати абсолютне позиціонування.

.stack {
  display: flex;
  flex-wrap: wrap;
}

.stack__element {
  flex: 50vw;
  height: 50vw;
}

Замініть height із 50vw на 50%.

Елементи з повною висотою

Viewport units використовують для зображень, які мають масштабуватися до висоти екрану користувача. Без viewport units, всі контейнерні елементи .image повинні були б мати height: 100%;. Отримайте той же результат з меншою кількістю коду:

.image {
  height: 100vh;
  width: auto;
}

Замініть 100vh на 100% і подивіться на результат.

Отримання елемента коротшого, ніж екран

Що якщо ми хочемо зменшити висоту елемента відносно вікна перегляду? Метод буде корисним, якщо ви хочете точно контролювати висоту елемента щодо розміру вікна перегляду, так що він завжди буде залишатися в полі зору.

.shorten-me {
  max-height: 90vh;
}

Спробуйте зменшити ширину екрану в Codepen, щоб у вас було дуже вузьке вікно перегляду. Зверніть увагу на поведінку текстового поля.

Масштабування тексту

Rеm і Em надають розробникам гнучкість при налаштуванні розміру шрифту, але вони не масштабуються динамічно з розміром екрану. Ми можемо йти по шляху, де rem успадковується від базового елемента з деяким розміром шрифту, але давайте використаємо viewport unit на root-елементі, змінивши розмір шрифту.

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

html {
  font-size: 16px;
}

h1 {
  font-size: calc(100% + 5vw); 
}

Переривання контейнера

Viewport units дозволяють розірвати вміст елемента або елементів. У сценаріях, де CMS не дозволяє змінити нашу розмітку в шаблоні HTML, за допомогою viewport units можна отримати бажаний результат незалежно від розмітки. Цей метод буде працювати не завжди. Але іноді це хороший трюк.

.container {
  max-width: 1024px;
  margin: 0 auto;
}

.breakout { 
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  width: 100vw; 
}

Підтримка браузерів і підводні камені

Хоча viewport units підтримують всі основні веб-браузери, ви можете зустріти помилки:

  • Safari. Відсутність підтримки viewport units всередині calc() в Safari 8 і нижче.
  • Деяких версіях Internet Explorer і Edge. Немає повної підтримки, відсутся підтримка vmax.
  • Платформах, особливо Windows. Вони по різному розраховують ширину смуги прокрутки в різних браузерах.
  • Chrome не приймає до уваги viewport units під час друку.

Підтримку можна перевірити себе на caniuse .

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.2K
Приєднався: 7 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація