CSS Academy · Урок

Единицы области просмотра: vw, vh, dvh

Задавайте размеры элементов относительно области просмотра браузера с помощью vw, vh и современных единиц dvh.

Урок 3 из 413 шагов

«Единицы области просмотра: vw, vh, dvh» — бесплатный урок CSS Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

Что такое единицы области просмотра

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

vw — ширина области просмотра

1vw = 1% ширины области просмотра. 100vw заполняет всю ширину области просмотра. Это удобно для элементов на всю ширину без сложностей, связанных с процентами.

<div class="hero"></div>

vh — высота области просмотра

1vh = 1% высоты области просмотра. 100vh заполняет всю высоту области просмотра. Это классический вариант для полноэкранных главных секций и модальных окон.

<div class="fullscreen">100vh fills the viewport height</div>

Проблема 100vh на мобильных устройствах

В мобильных браузерах высота области просмотра меняется, когда интерфейс браузера (адресная строка) появляется или скрывается во время прокрутки. 100vh может непоследовательно включать или исключать элементы интерфейса браузера, из-за чего содержимое частично скрывается.

dvh — динамическая высота области просмотра

dvh (динамическая высота области просмотра) динамически обновляется с учётом фактической видимой высоты после изменения интерфейса браузера. Это решает проблему 100vh на мобильных устройствах.

<div class="mobile-hero">Dynamic viewport height (100dvh)</div>

svh и lvh

CSS также предоставляет svh (малая высота области просмотра — интерфейс браузера всегда исключён) и lvh (большая высота области просмотра — как если бы интерфейс был скрыт). Это позволяет точно управлять поведением области просмотра на мобильных устройствах.

Гибкая типографика с vw

Использование vw для размера шрифта создаёт текст, масштабируемый вместе с экраном:

<h1>Fluid Heading</h1>

Ограничения ширины области просмотра

100vw на настольных компьютерах включает ширину полосы прокрутки. При неосторожном использовании это вызывает горизонтальное переполнение. Для блочных элементов предпочтительнее использовать width: 100%, оставляя vw для особых случаев.

vmin и vmax

1vmin = 1% меньшего измерения области просмотра (ширины или высоты). 1vmax = 1% большего измерения. Это полезно для квадратных контейнеров, адаптирующихся к изменениям ориентации.

<div class="square"></div>

svw, lvw, dvw — варианты ширины

Как и для высоты, CSS предоставляет svw, lvw и dvw для ширины. Динамические варианты (dvw, dvh) наиболее полезны на мобильных устройствах.

Практические шаблоны

Распространённые шаблоны с единицами области просмотра:

min-height: 100dvh — безопасные для мобильных устройств секции на весь экран
height: 100svh — панели фиксированного интерфейса
font-size: clamp(1rem, 2.5vw, 2rem) — заголовки с гибким размером шрифта
width: min(800px, 90vw) — контейнеры безопасной ширины

Быстрая проверка

Почему для полноэкранных мобильных секций предпочтительнее dvh, а не vh?

Ответь в интерактивном уроке

Итоги

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

Можно начать бесплатно

Изучай CSS с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 40
Уроки: 159

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Единицы области просмотра: vw, vh, dvh» бесплатный?

Да — полный текст урока «Единицы области просмотра: vw, vh, dvh» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Единицы области просмотра: vw, vh, dvh»?

Задавайте размеры элементов относительно области просмотра браузера с помощью vw, vh и современных единиц dvh. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Единицы области просмотра: vw, vh, dvh»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к CSS Academy