Руководство по CSS Viewport Units: vw, vh, vmin, vmax

Длина в процентах от области просмотра или единицы просмотра, как их чаще называют, являются адаптивными единицами CSS, которые позволяют определять размеры в процентах от ширины или длины области просмотра. Модули области просмотра могут быть весьма полезны в тех случаях, когда другие отзывчивые модули CSS, такие как проценты, трудно заставить работать.

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

Читайте также: Руководство по CSS Grid Layout Fr Unit

Высота области просмотра (vh) и ширина области просмотра (vw)
W3C определяет область просмотра как «размер исходного содержащего блока». Другими словами, область просмотра – это область внутри окна браузера или любой другой области просмотра на экране.

Единицы vw и vh обозначают процент от ширины и высоты фактического окна просмотра. Они могут принимать значения от 0 до 100 в соответствии со следующими правилами:

100vw = 100% ширины области просмотра
1vw = 1% ширины области просмотра

100vh = 100% высоты области просмотра
1vh = 1% высоты области просмотра

Различия в процентах
Итак, чем же отличаются единицы просмотра в процентах от единиц измерения в процентах? Единицы измерения в процентах наследуют размер своего родительского элемента, в то время как единицы просмотра – нет. Единицы просмотра всегда рассчитываются как процент от размера области просмотра. В результате элемент, определенный единицами просмотра, может превышать размер своего родителя.
Пример: полноэкранные разделы
Полноэкранные разделы, вероятно, являются наиболее широко известными вариантами использования единиц просмотра.

HTML довольно прост; у нас просто есть три раздела друг под другом, и мы хотим, чтобы каждый из них занимал весь экран (но не больше).

В CSS мы используем 100vh как значение высоты и 100% как ширину. Здесь мы не используем модуль vw, поскольку по умолчанию полосы прокрутки также добавляются к размеру области просмотра. Итак, если бы мы использовали ширину: 100vw; Правило горизонтальная полоса прокрутки появится в нижней части окна браузера.

• {
    поле: 0;
    отступы: 0;
  }
  раздел {
    размер фона: обложка;
    background-position: center;
    ширина: 100%;
    высота: 100vh;
  }
  .секция 1 {
    background-image: url (‘https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg’);
  }
  .section-2 {
    background-image: url (‘https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg’);
  }
  .section-3 {
    background-image: url (‘https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg’);
  }

На демонстрационном примере GIF ниже, вы можете увидеть, что VH действительно отзывчивый юнит.
Согласно W3C документывышеупомянутую проблему горизонтальной полосы прокрутки можно решить, добавив переполнение: auto; Правило для корневого элемента. Это решение работает только частично, хотя. Горизонтальная полоса прокрутки действительно исчезает, но ширина по-прежнему рассчитывается на основе ширины области просмотра (включая боковую панель), поэтому элементы будут немного больше, чем должны быть.

Я бы сказал, что по этой причине я не посмел бы использовать модуль vw для определения размеров полноэкранных элементов. Нам это даже не нужно, так как ширина: 100%; Правило работает отлично. С полноэкранными макетами реальная проблема всегда заключалась в том, чтобы установить правильное значение высоты, и блок vh дает блестящее решение для этого.
Другие варианты использования
Если вы заинтересованы в других случаях использования VW и VH Lullabot имеет отличная статья это перечисляет несколько реальных примеров (с демонстрациями Codepen), таких как:

• Карты с фиксированным соотношением.
• Держать элемент короче экрана.
• Масштабирование текста.
• Вырваться из контейнера.

Opera.dev также имеет краткий учебник о том, как вы можете использовать рычаги VW в создании адаптивной типографии.

Вы можете использовать единицы измерения только в свойствах ширины и высоты, но не в других. Например, вы можете установить размер отступов и полей, используя единицы vw и vh.
Мин. Область просмотра (vmin) и макс. Область просмотра (vmax)
Блоки vmin и vmax позволяют вам получить доступ к размеру меньшей или большей стороны области просмотра в соответствии со следующими правилами:

100vmin = 100vw или 100vh, в зависимости от того, что меньше
1vmin = 1vw или 1vh, в зависимости от того, что меньше

100vmax = 100vw или 100vh, в зависимости от того, что больше
1vmax = 1vw или 1vh, в зависимости от того, что больше

Так, в случае портретной ориентации 100vmin равен 100vw, так как область просмотра меньше по горизонтали, чем по вертикали. По той же причине 100vmax будет равно 100vh.

Точно так же в случае альбомной ориентации 100vmin равен 100vh, так как область просмотра меньше по вертикали, чем по горизонтали. И, конечно, 100vmax здесь будет равно 100vw.
Пример: сделать тексты героев удобочитаемыми на каждом экране
Единицы vmin и vmax гораздо менее широко известны, чем vw и vh. Тем не менее, они могут превосходно использоваться в качестве замены для ориентации запросов @media. Например, vmin и vmax могут пригодиться, когда у вас есть элементы, которые могут выглядеть странно при разных соотношениях сторон.

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

Вот основная идея их решения:

h1 {
  размер шрифта: 20vmin;
  семейство шрифтов: авенир, без засечек;
  вес шрифта: 900;
  выравнивание текста: по центру;
}

в Codepen демо, вы можете проверить, как vmin решает проблему читабельности текстов героев. Откройте представление «Полная страница» в Codepen, затем измените размер окна браузера по горизонтали и вертикали, чтобы увидеть, как изменяется текст героя.

Увидеть перо vMin для героя текста Дадли Стори (@dudleystorey) на CodePen,
Поддержка браузера
Как вы можете видеть на CanIUse диаграмма ниже, поддержка браузера относительно хороша для единиц просмотра. Однако имейте в виду, что некоторые версии IE и Edge не поддерживают vmax. Также iOS 6 и 7 есть проблема с модулем vh, который был исправлен в iOS 8.

Читайте также: Взгляд в CSS-единицы: пиксели, EM и процент