Единицы измерения vw, vh, vmin и vmax в CSS. Полное руководство с примерами

В веб-дизайне важно создавать адаптивные макеты, которые корректно отображаются на различных устройствах и экранах. CSS предоставляет множество инструментов для этого, и одними из наиболее полезных являются единицы измерения vw, vh, vmin и vmax. Эти единицы измерения зависят от размера окна браузера, что делает их идеальными для создания гибких и адаптивных интерфейсов. В этой статье мы рассмотрим, как работают эти единицы измерения, и приведём примеры их использования.

Что такое vw, vh, vmin и vmax?

vw (viewport width)

Единица измерения vw (viewport width) равна 1% от ширины окна просмотра (viewport). Например, если ширина окна составляет 1000 пикселей, то 1vw будет равен 10 пикселям.

vh (viewport height)

Единица измерения vh (viewport height) равна 1% от высоты окна просмотра. Например, если высота окна составляет 800 пикселей, то 1vh будет равен 8 пикселям.

vmin (viewport minimum)

Единица измерения vmin (viewport minimum) равна 1% от меньшего из размеров окна просмотра, будь то ширина или высота. Если ширина окна составляет 1000 пикселей, а высота — 800 пикселей, то 1vmin будет равен 8 пикселям.

vmax (viewport maximum)

Единица измерения vmax (viewport maximum) равна 1% от большего из размеров окна просмотра. Если ширина окна составляет 1000 пикселей, а высота — 800 пикселей, то 1vmax будет равен 10 пикселям.

Примеры использования vw, vh, vmin и vmax

Пример 1: Адаптивный размер текста

h1 {
    font-size: 5vw;
}

В этом примере размер текста заголовка h1 будет равен 5% от ширины окна просмотра, что обеспечит адаптивность текста на разных экранах.

Пример 2: Полноэкранный фон

.fullscreen {
    width: 100vw;
    height: 100vh;
    background-color: lightblue;
}

В этом примере элемент с классом fullscreen займёт всю ширину и высоту окна просмотра, создавая полноэкранный фон.

Пример 3: Квадратный элемент, адаптирующийся к размеру окна

.square {
    width: 50vmin;
    height: 50vmin;
    background-color: coral;
}

В этом примере элемент с классом square будет иметь ширину и высоту, равные 50% от меньшего размера окна просмотра, что обеспечит пропорциональность на разных экранах.

Пример 4: Гибкая сетка

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 2vmax;
}

.grid-item {
    background-color: lightgreen;
    padding: 2vmax;
}

В этом примере используется гибкая сетка, где зазоры и отступы элементов зависят от большего размера окна просмотра, что создаёт адаптивный дизайн.

Когда использовать vw, vh, vmin и vmax?

vw и vh

Эти единицы полезны, когда вам нужно задать элементы, которые масштабируются в зависимости от размера окна. Например, для создания адаптивного текста, полноэкранных фоновых изображений или элементов, которые должны занимать фиксированный процент от окна просмотра.

vmin и vmax

Эти единицы полезны, когда вам нужно обеспечить пропорциональность элементов на разных экранах. Например, для создания квадратных или круговых элементов, которые сохраняют свои пропорции независимо от соотношения сторон экрана.

Преимущества использования vw, vh, vmin и vmax

1. Адаптивность: Эти единицы измерения позволяют создавать макеты, которые автоматически подстраиваются под размеры окна просмотра, обеспечивая лучшее отображение на различных устройствах.
2. Гибкость: Вы можете использовать их в комбинации с другими единицами измерения для создания сложных и динамичных макетов.
3. Проще масштабировать элементы: Использование vw, vh, vmin и vmax упрощает создание элементов, которые изменяют свои размеры в зависимости от окна просмотра, без необходимости писать сложные медиазапросы.

Заключение

Единицы измерения vw, vh, vmin и vmax предоставляют мощные возможности для создания адаптивных и гибких веб-дизайнов. Они помогают обеспечить согласованное отображение элементов на различных устройствах и экранах, упрощая процесс разработки. Освоив использование этих единиц измерения, вы сможете создавать более динамичные и отзывчивые интерфейсы для ваших веб-проектов.