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


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

Рис. 1. Полноэкранное фоновое изображение с шириной 100vw

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

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 Эквивалентно 1% высоты окна браузера.
vw Эквивалентно 1% ширины окна браузера.
vmin Эквивалентно 1% меньшего размера окна браузера по высоте или ширине.
vmax Эквивалентно 1% большего размера окна браузера по высоте или ширине.

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;
}
Рис. 2. Адаптивно полноэкранное фоновое изображение

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, а vmax12px.

Рис. 3. Единицы vmin и vmax
  • Создание Сайтов

    Это было интересно. Остается научиться применять это в практике. При удобном случае попробую внедрить. Благодарю.

    • Пожалуйста! Примеры наглядные, проблем с реализацией не должно быть.

  • Думай

    Клево, то, что я искал)

  • Chernov Vladimir

    Елена, статьи у вас супер! Все понятно! Остаюсь надолго)

  • Chernov Vladimir

    Добрый день, Елена! Хотел поинтересоваться, делаю landing с использованием VH, для full screen slides отлично работает!
    Решил дать эту высоту для последующих containers (на bootstrap делаю), в контейнер добавил 4 блока (карты, thumbnail) в линию, но как дело дошло до адаптации — при уменьшении экрана, карты вываливаются за границы блока, поверх нижних. В итоге убрал для контейнеров VH. Но теперь нет, одинаковых по высоте блоков. Есть ли какое решение другое?
    Если не затруднит, конечно.)

    • Здравствуйте. Попробуйте сделать так:
      1) для контейнера каждого слайда задайте высоту с помощью 100vh, а также position: relative;
      2) для фрейма, с помощью которого загружается карта пропишите

      iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

      Это должно сработать, но в любом случае часть карты справа и слева будет обрезаться.
      Приём, как сделать адаптивный фрейм, описано в уроке https://html5book.ru/adaptivnoe-video/

  • Создание Сайтов

    Что означает сия строка: scrollTop: movePos}, 600);

    • Осуществляет скролл вверх или вниз до указанного элемента nav на заданное расстояние со скоростью 600 миллисекунд.

  • Создание Сайтов

    Как сделать, чтобы фон масштабировался.

    • Что вы имеете в виду под «масштабировался»? .fullscreen-bg {} как раз и содержит нужный код.

      • Создание Сайтов

        Это когда с уменьшением ширины, пропорционально уменьшается и высота.

        • Тогда вам не подходит это способ, потому что высота всегда будет адаптироваться под высоту окна браузера.

  • Dron N

    Про rem/em бы ещё статью или какие там в этом сезоне модны единицы измерения 🙂

    • Вы знаете, мода на эти единицы измерения уже прошла. Теперь с той же пеной у рта советуют их не использовать при определении размера элементов на сайте ))

  • Во-первых, для iOS нужно добавлять мета-тег <meta name=»viewport» content=»width=device-width, initial-scale=1.0″>, чтобы физический пиксель был равен аппаратному и использовать медиа-запросы. Вы можете почитать урок про адаптивную вёрстку на сайте в разделе «ВЁРСТКА», там основные приёмы разобраны.