vw, vh, vmin, vmax

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Это относительные единицы измерения. Все они задают размер относительно размеров окна браузера (viewport), то есть видимой части документа.

Пример

Секция статьи "Пример"

Высота блока будет равна 30% ширины вьюпорта, а высота — 50% высоты вьюпорта:

        
          
          div {  min-width: 30vw;  height: 50vh;}
          div {
  min-width: 30vw;
  height: 50vh;
}

        
        
          
        
      

Как это понять

Секция статьи "Как это понять"

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

vh

Секция статьи "vh"

Размер указывается в процентах от высоты вьюпорта (viewport height). 100vh соответствует полной высоте вьюпорта. 1vh = 1% высоты вьюпорта.

Открыть демо в новой вкладке

vw

Секция статьи "vw"

Размер в процентах от ширины вьюпорта (viewport width). 100vw соответствует полной ширине вьюпорта. 1vw = 1% ширины вьюпорта.

vmin

Секция статьи "vmin"

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

Открыть демо в новой вкладке

vmax

Секция статьи "vmax"

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

На практике

Секция статьи "На практике"

Денис Ежков советует

Секция статьи "Денис Ежков советует"

🛠 В операционных системах Linux и Windows использование 100vw может осложняться тем фактом, что вертикальный скроллбар является частью вьюпорта и уменьшает фактическую ширину страницы. Но ширина вьюпорта остаётся неизменной. Поэтому, если есть вертикальный скролл, то задание ширины блока 100vw вызовет появление горизонтального скролла. На macOS этот эффект не наблюдается, потому что там скролл располагается НАД содержимым страницы, а не рядом.

Открыть демо в новой вкладке

В ОС Linux и Windows в этом примере будет наблюдаться горизонтальный скролл.

🛠Относительные единицы измерения прекрасно подходят для адаптивной вёрстки, а если учесть, что на мобильных устройствах скролл находится НАД содержимым страницы, у нас вообще нет никаких проблем с этими единицами.