Клавиша / esc

vw, vh, vmin, vmax

Единицы измерения, которые считаются от размера окна браузера.

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

Кратко

Скопировано

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

Пример

Скопировано

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

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

        
        
          
        
      

Как понять

Скопировано

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

vh

Скопировано

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

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

vw

Скопировано

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

vmin

Скопировано

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

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

vmax

Скопировано

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

На практике

Скопировано

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

Скопировано

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

Чтобы всегда видеть скролл и возможные связанные с ним проблемы у пользователей других операционных систем, измените настройки по пути «Оформление» → «Показывать полосы прокрутки».

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

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

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