Относительно экрана: vw, vh, vmin, vmax
Относительно экрана: vw, vh, vmin, vmax
В CSS существует несколько относительных единиц измерения, которые позволяют задавать размеры элементов не абсолютно, а относительно некоторого контекста. Это особенно полезно при создании адаптивных интерфейсов.
Viewport Width (vw)
Единица vw представляет собой процент ширины текущего просмотрового окна (viewport). Например, если вы установите ширину элемента в 50vw, это будет равно половине ширины текущего окна браузера.
.example {
width: 50vw;
}
Viewport Height (vh)
Единица vh определяет процент высоты текущего просмотрового окна. Если, например, установить высоту элемента в 30vh, это будет составлять 30% от высоты текущего окна браузера.
.example {
height: 30vh;
}Viewport Minimum (vmin) и Viewport Maximum (vmax)
Единицы vmin и vmax определяют размеры элементов относительно меньшей или большей стороны текущего просмотрового окна соответственно.
/* Пример с vmin */
.example {
font-size: 3vmin; /* Размер шрифта будет 3% от минимальной стороны окна */
}
/* Пример с vmax */
.example {
font-size: 5vmax; /* Размер шрифта будет 5% от максимальной стороны окна */
}Пример использования всех единиц
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
}
.container {
width: 80vw; /* 80% от ширины окна */
height: 60vh; /* 60% от высоты окна */
font-size: 3vmin; /* 4% от минимальной стороны окна */
padding: 2vmax; /* 2% от максимальной стороны окна */
margin: 1vw; /* 1% от ширины окна */
background-color: #fff;
text-align: center;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>
<title>Пример использования относительных единиц в CSS</title>
</head>
<body>
<div class="container">
<h1>Текст с 3 vmin</h1>
<p>Этот текст имеет размер, вычисленный с использованием относительных единиц измерения в CSS.</p>
</div>
</body>
</html>
Этот код создает страницу с контейнером, в котором применяются стили с использованием относительных единиц измерения (vw, vh, vmin, vmax) для различных свойств, включая размер текста (font-size).
Заключение
vw, vh, vmin, vmax их использование позволяет легко подстраивать элементы под разные размеры экранов, делая ваш веб-сайт более отзывчивым и удобным для пользователей.
Надеюсь, этот урок поможет вам лучше понять и использовать vw, vh, vmin и vmax в ваших проектах.
Будьте первым