Для чего служат vh, vw при указании размеров ?
Спросят с вероятностью 7%

vh (viewport height) и vw (viewport width) — это единицы измерения, которые используются для указания размеров элементов относительно размеров области просмотра (viewport). Эти единицы особенно полезны при создании адаптивных и отзывчивых дизайнов, так как они позволяют легко масштабировать элементы в зависимости от размеров окна браузера.

Определения:
✅`vh` (viewport height): 1 vh равен 1% от высоты области просмотра.
✅`vw` (viewport width): 1 vw равен 1% от ширины области просмотра.

Примеры:

1️⃣Указание высоты элемента в `vh`:

        .full-height {
        height: 100vh; /* Элемент будет занимать 100% высоты области просмотра */
    }

В этом примере элемент с классом full-height всегда будет занимать всю высоту области просмотра, независимо от высоты окна браузера.

2️⃣Указание ширины элемента в vw:

        .full-width {
        width: 100vw; /* Элемент будет занимать 100% ширины области просмотра */
    }

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

3️⃣Создание адаптивного текста:

        .responsive-text {
        font-size: 2vw; /* Размер шрифта будет 2% от ширины области просмотра */
    }

В этом примере размер шрифта элемента с классом responsive-text будет изменяться в зависимости от ширины окна браузера, что может быть полезно для создания адаптивных заголовков.

Преимущества:
✅Адаптивность: Эти единицы позволяют легко адаптировать элементы к различным размерам экранов без необходимости использовать медиа-запросы.
✅Процентное соотношение: Основываются на процентах, что делает их удобными для создания элементов, занимающих определённую долю области просмотра.
✅Простота в использовании: Легко понять и применять, особенно для быстрого создания отзывчивых дизайнов.

Пример с vh и vw:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример использования vh и vw</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        .header {
            height: 10vh; /* Высота заголовка - 10% от высоты области просмотра */
            background-color: #4CAF50;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .main {
            height: 80vh; /* Высота основного контента - 80% от высоты области просмотра */
            background-color: #f4f4f4;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3vw; /* Размер шрифта - 3% от ширины области просмотра */
        }

        .footer {
            height: 10vh; /* Высота подвала - 10% от высоты области просмотра */
            background-color: #333;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="header">
        Заголовок
    </div>
    <div class="main">
        Основной контент
    </div>
    <div class="footer">
        Подвал
    </div>
</body>
</html>

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых