Viewport Units или растягивание контента в зависимости от размера экрана

При необходимости растянуть блок с контентом по ширине или высоте экрана (особенно актуально при верстке лендингов) проще всего использовать появившиеся в CSS3 относительными единицами измерения vw, vh, vmin и vmax.

Так называемые Viewport Units - это относительные единицы рассчитывающиеся в процентах от размеров области просмотра браузера.

Viewport height и Viewport width (vh и wh) — высота и ширина области просмотра. 1vh = 1% от высоты области просмотра, 1vw = 1% от ширины области просмотра, то есть если у устройства высота экрана больше чем ширина, то

vmin будет рассчитываться относительно ширины, а vmax будет рассчитываться относительно высоты экрана.

div {
    height: 100vh; /* высота ,блока равна высоте видимой области браузера */
    }

 

Tags: CSS3, HTML5

 

Хотите поработать с нами?
Пишите или звоните!