Единицы измерения sv, lv, dv в CSS. Полное руководство с примерами

С развитием веб-технологий и увеличением разнообразия устройств, используемых для доступа к веб-страницам, появляется необходимость в новых инструментах для адаптивного дизайна. Традиционные единицы измерения в CSS, такие как px, em, rem, и проценты, имеют свои ограничения. Недавно в CSS были введены новые единицы измерения, специально предназначенные для работы с размерами окна браузера: sv, lv и dv. В этой статье мы подробно рассмотрим, что они собой представляют, как их использовать и какие преимущества они предлагают.

Основные единицы измерения окна браузера

sv (Small Viewport)

Единицы svw и svh представляют собой 1% ширины (svw) и высоты (svh) маленького вьюпорта (viewport). Эти единицы полезны для адаптации дизайна под малые размеры экранов, такие как мобильные устройства.

Пример:

/* Ширина элемента составляет 50% от ширины маленького вьюпорта */
.element {
    width: 50svw;
}

/* Высота элемента составляет 50% от высоты маленького вьюпорта */
.element {
    height: 50svh;
}

lv (Large Viewport)

Единицы lvw и lvh представляют собой 1% ширины (lvw) и высоты (lvh) большого вьюпорта. Эти единицы полезны для адаптации дизайна под большие экраны, такие как настольные мониторы.

Пример:

/* Ширина элемента составляет 75% от ширины большого вьюпорта */
.element {
    width: 75lvw;
}

/* Высота элемента составляет 75% от высоты большого вьюпорта */
.element {
    height: 75lvh;
}

dv (Dynamic Viewport)

Единицы dvw и dvh представляют собой 1% ширины (dvw) и высоты (dvh) динамического вьюпорта. Эти единицы адаптируются в реальном времени при изменении размеров окна браузера.

Пример:

/* Ширина элемента составляет 100% от ширины динамического вьюпорта */
.element {
    width: 100dvw;
}

/* Высота элемента составляет 100% от высоты динамического вьюпорта */
.element {
    height: 100dvh;
}

Преимущества и использование

Адаптивный дизайн

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

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

Использование новых единиц измерения не требует значительных изменений в коде. Достаточно заменить стандартные единицы на новые (sv, lv, dv) в существующих стилях.

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

Рассмотрим несколько примеров использования новых единиц измерения в реальных ситуациях.

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

Создание адаптивной сетки, которая изменяется в зависимости от размеров экрана.

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10svw, 1fr));
    gap: 2svw;
}

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

Изменение размера шрифта в зависимости от размеров вьюпорта.

.body-text {
    font-size: 2svw;
}

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

Создание элемента, который всегда будет занимать весь экран, независимо от изменений размеров окна.

.fullscreen-background {
    width: 100dvw;
    height: 100dvh;
    background: url('background.jpg') no-repeat center center;
    background-size: cover;
}

Заключение

Единицы измерения sv, lv и dv представляют собой значительный шаг вперед в области адаптивного дизайна. Они предоставляют разработчикам мощные инструменты для создания гибких и адаптивных интерфейсов, которые могут адаптироваться к широкому спектру устройств и размеров экранов. Использование этих единиц измерения упрощает процесс создания адаптивного дизайна и позволяет сосредоточиться на создании качественного пользовательского опыта.