Пошук уроків, статей та іншого контенту
Вивчите одиниці vw, vh, vmin і vmax та використаєте їх для розмірів, залежних від viewport.
Viewport — це видима область вебсторінки у вікні браузера. Її розмір залежить від:
ширини вікна браузера на комп’ютері;
ширини екрана пристрою;
орієнтації екрана на смартфоні або планшеті.
Viewport не обов’язково дорівнює фізичному розміру екрана. Наприклад, на смартфоні браузер може займати лише частину екрана або мати панелі навігації.
За замовчуванням CSS має одиниці, що залежать від viewport:
vw — viewport width, ширина viewport;
vh — viewport height, висота viewport;
vmin — менше зі значень ширини та висоти viewport;
vmax — більше зі значень ширини та висоти viewport.
Одна одиниця дорівнює одному відсотку відповідного розміру.
vw1vw дорівнює 1% ширини viewport.
Якщо ширина viewport становить 1200px, тоді:
1vw = 12px
50vw = 600px
100vw = 1200pxПриклад:
.box {
width: 50vw;
}Ширина елемента буде дорівнювати половині ширини viewport. Якщо користувач змінить розмір вікна, ширина елемента також зміниться.
vw зручно використовувати для:
великих секцій;
декоративних блоків;
розмірів, які мають залежати від ширини екрана;
горизонтальних відступів у макетах, що масштабуються.
vh1vh дорівнює 1% висоти viewport.
Якщо висота viewport становить 800px, тоді:
1vh = 8px
50vh = 400px
100vh = 800pxПриклад:
.hero {
min-height: 100vh;
}Такий блок матиме мінімальну висоту, що дорівнює висоті viewport. Це часто використовують для першого екрану сторінки.
Важливо: 100vh не означає «висота всього документа». Це висота лише видимої області браузера.
vmin і vmaxvmin1vmin дорівнює 1% меншого з двох значень:
ширини viewport;
висоти viewport.
Якщо viewport має розміри 1200 × 800px:
1vmin = 8pxЯкщо viewport має розміри 600 × 900px:
1vmin = 6pxvmin корисний, коли розмір елемента має поміщатися як по ширині, так і по висоті екрана.
vmax1vmax дорівнює 1% більшого з двох значень.
Для viewport 1200 × 800px:
1vmax = 12pxДля viewport 600 × 900px:
1vmax = 9pxvmax використовують рідше. Він може бути корисним для великих декоративних елементів, розмір яких має залежати від найбільшого виміру viewport.
У наступному прикладі:
секція займає всю висоту viewport;
заголовок має розмір, що залежить від ширини viewport;
круглий елемент використовує vmin, тому його розмір залежить від меншого виміру екрана;
відступи задані через vw і vh.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Viewport units</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
background: #eef2ff;
color: #172554;
}
.hero {
min-height: 100vh;
padding: 8vh 8vw;
display: grid;
place-items: center;
text-align: center;
}
.content {
max-width: 700px;
}
h1 {
margin: 0 0 2vh;
font-size: 6vw;
}
p {
margin: 0;
font-size: 1.5rem;
line-height: 1.5;
}
.circle {
width: 20vmin;
height: 20vmin;
margin: 5vh auto 0;
border-radius: 50%;
background: #4f46e5;
}
</style>
</head>
<body>
<main class="hero">
<div class="content">
<h1>Viewport units</h1>
<p>
Розміри цього елемента залежать від ширини та висоти viewport.
</p>
<div class="circle"></div>
</div>
</main>
</body>
</html>Спробуйте змінити розмір вікна браузера. Заголовок, відступи та коло змінюватимуть свої розміри.
Нехай viewport має ширину 1000px і висоту 700px:
10vw дорівнює 100px;
10vh дорівнює 70px;
10vmin дорівнює 70px;
10vmax дорівнює 100px.
Під час змінення орієнтації пристрою значення також змінюються. Наприклад, після повороту смартфона ширина стає висотою, а висота — шириною.
Viewport-одиниці не завжди підходять для всіх розмірів. Наприклад, заголовок із font-size: 8vw може бути надто маленьким на вузькому екрані або надто великим на широкому.
Для обмеження мінімального та максимального розміру використовують clamp():
h1 {
font-size: clamp(2rem, 6vw, 5rem);
}У цьому прикладі:
2rem — мінімальний розмір;
6vw — гнучке значення, залежне від ширини viewport;
5rem — максимальний розмір.
Значення розміру змінюється разом із viewport, але не стає меншим за 2rem і більшим за 5rem.
Для коректного відображення сторінки на мобільних пристроях у <head> зазвичай додають:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Цей метатег повідомляє браузеру, що ширина сторінки має відповідати ширині пристрою. Без нього мобільний браузер може використовувати умовну ширину сторінки, через що viewport-одиниці працюватимуть не так, як очікується.
100vw для ширини елемента100vw дорівнює ширині viewport, але іноді включає ширину вертикальної смуги прокручування. Через це елемент може бути трохи ширшим за видиму область і спричинити горизонтальну прокрутку.
Якщо потрібно розтягнути елемент на доступну ширину батьківського контейнера, часто краще використати:
.element {
width: 100%;
}100vhСекція з height: 100vh може обрізати вміст, якщо його висота перевищує висоту viewport. Для секцій із непередбачуваною кількістю вмісту безпечніше використовувати:
.section {
min-height: 100vh;
}У такому разі секція може стати вищою, якщо вміст не поміщається.
vwТакий стиль може створити проблеми:
h1 {
font-size: 10vw;
}На широкому моніторі заголовок може стати надто великим. Для контрольованого масштабування використовуйте clamp():
h1 {
font-size: clamp(2rem, 10vw, 6rem);
}vw, vh, vmin і vmax залежать від viewport, а не від розміру батьківського елемента. Якщо потрібно залежати від ширини контейнера, viewport-одиниці можуть бути невідповідним рішенням.
vw — один відсоток ширини viewport.
vh — один відсоток висоти viewport.
vmin — один відсоток меншого виміру viewport.
vmax — один відсоток більшого виміру viewport.
100vh часто використовують для секцій на всю висоту екрана.
vmin зручний для елементів, які мають однаково добре працювати в різних орієнтаціях.
Для масштабування тексту з обмеженнями використовуйте clamp().
На мобільних сторінках додавайте метатег viewport.
Перевіряйте макет на вузьких і широких екранах, щоб розміри не ставали надто великими або малими.