Что такое vw и vh?

В CSS единицы vw (viewport width) и vh (viewport height) относятся к относительным единицам измерения, которые зависят от размеров окна просмотра (viewport). Они предназначены для создания адаптивных интерфейсов, которые изменяются в соответствии с размером экрана устройства.

• vw (viewport width): 1 vw равен 1% от ширины окна просмотра. Например, если ширина экрана составляет 1000 пикселей, то 1 vw будет равен 10 пикселей.
• vh (viewport height): 1 vh равен 1% от высоты окна просмотра. Если высота экрана составляет 800 пикселей, то 1 vh будет равен 8 пикселей.

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

Примеры использования

1. Пример с vw:

.container {
    width: 50vw; /* Элемент займет 50% ширины окна просмотра */
    height: 200px;
    background-color: lightblue;
}

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

2. Пример с vh:

.full-screen {
    width: 100vw; /* Элемент займет полную ширину окна просмотра */
    height: 100vh; /* Элемент займет полную высоту окна просмотра */
    background-color: coral;
}

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

Комбинирование vw и vh

Вы также можете комбинировать эти единицы для более сложных макетов. Например:

.card {
    width: 30vw; /* 30% ширины окна */
    height: 40vh; /* 40% высоты окна */
    margin: 2vw; /* Отступ равен 2% от ширины окна */
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

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

Заключение

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