vw, vh, vmin, vmax

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

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

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

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

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

На практике

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

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

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

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

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

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

+ Развернуть