Единицы измерения vh, vw, vmin, vmax

В CSS3 были добавлены новые относительные единицы измерения, такие как vh, vw, vmin, vmax. Эти единицы вычисляются относительно размеров окна браузера. Для настольных компьютеров ширина окна браузера больше ширины области просмотра (добавляется ширина скроллбара), поэтому если для элемента установить ширину 100vw, то он выйдет за пределы html.

Поддержка браузерами

IE: 9.0 кроме vmax, вместо vmin используйте vm
Edge: 12.0 кроме vmax, вместо vmin используйте vm
Firefox: 19.0
Chrome: 26.0
Opera: 15.0
Safari: 6.1
iOS Safari: 8.0
Android: 4.4
Chrome for Android: 55.0

1. Единицы vh и vw

Приёмы отзывчивого веб-дизайна базируются на использовании процентных значений. Но проценты далеко не лучшее решение для каждого случая, так как они вычисляются относительно размеров ближайшего родительского элемента. Поэтому, если вы хотите использовать высоту и ширину окна браузера, лучше воспользоваться единицами vh и vw. Например, если высота окна браузера равна 900px, то 1vh будет равен 9px. Аналогично, если ширина окна браузера равна 1600px, то 1vw будет равен 16px.

1.1. Адаптивное полноэкранное фоновое изображение

Так как ширина элемента, указанная с помощью 100vw больше ширины области просмотра, то для создания полноэкранных фоновых изображений лучше использовать ширину 100%, которая будет равна ширине корневого элемента html.

.fullscreen-bg {
  background: url(image.jpg);
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100vh;
}

1.2. Эффект полностраничного слайда

Чтобы сделать блок на всю высоту окна браузера, необходимо задать height: 100%; для трёх элементов — html, body и непосредственно для самого блока:

html, body {
  height: 100%;
}
section {
  height: 100%;
}

Так как процентные размеры вычисляются относительно значений родительских элементов, то необходимо установить соответствующие значения для каждого элемента DOM. Единица измерения vh не требует установки значений по цепочке, так как её значение вычисляется напрямую относительно окна браузера:

section {
  height: 100vh;
}

Эффект перелистывания слайдов при клике на стрелку реализуется с помощью небольшого скрипта jQuery:

jQuery(document).ready(function($) {
  $('nav').on('click', function() {
    if ($(this).hasClass('down')) {
      var movePos = $(window).scrollTop() + $(window).height();
    }
    if ($(this).hasClass('top')) {
      var movePos = $(window).scrollTop() - $(window).height();
    }
    $('html, body').animate({
      scrollTop: movePos}, 600);
  });
});

See the Pen aBxxGv by Elena (@html5book) on CodePen.

Высоту, заданную с помощью vh также можно использовать для выравнивания элемента по центру страницы:

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Теперь любой элемент будет расположен строго по центру без каких-либо дополнительных приёмов.

See the Pen NbmJad by Elena (@html5book) on CodePen.

2. Единицы vmin и vmax

В то время, как единицы vh и vw всегда вычисляются относительно соответствующих размеров окна браузера, vmin и vmax определяются минимальным или максимальным значением высоты или ширины. Например, если ширина окна браузера равна 1200px, а высота 700px, то vmin будет равен 7px, а vmax — 12px.