Кратко
Секция статьи "Кратко"Это относительные единицы измерения. Все они задают размер относительно размеров окна браузера (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% ширины вьюпорта.
vmin
Секция статьи "vmin" Размер в процентах от меньшей размерности вьюпорта. Если высота меньше ширины (например, горизонтальная ориентация телефона), то расчёт будет вестись относительно высоты.
vmax
Секция статьи "vmax" Размер в процентах от большей размерности вьюпорта. Если высота больше ширины (например, нормальная ориентация телефона), то расчёт будет вестись относительно высоты.
На практике
Секция статьи "На практике"советует Секция статьи "Денис Ежков советует"
🛠 В операционных системах Linux и Windows использование 100vw
может осложняться тем фактом, что вертикальный скроллбар является частью вьюпорта и уменьшает фактическую ширину страницы. Но ширина вьюпорта остаётся неизменной. Поэтому, если есть вертикальный скролл, то задание ширины блока 100vw
вызовет появление горизонтального скролла. На macOS этот эффект не наблюдается, потому что там скролл располагается НАД содержимым страницы, а не рядом.
В ОС Linux и Windows в этом примере будет наблюдаться горизонтальный скролл.
🛠Относительные единицы измерения прекрасно подходят для адаптивной вёрстки, а если учесть, что на мобильных устройствах скролл находится НАД содержимым страницы, у нас вообще нет никаких проблем с этими единицами.