Уроки по CSS: что такое единицы просмотра vw, vh, vmin и vmax

Единица просмотра, или, как ее еще называют – длина в процентах от области просмотра – это адаптивная единица в CSS стилях, которая позволяет определять размеры в процентах от ширины или длины области просмотра. Единицы области просмотра полезно использовать в тех случаях, когда другие относительные единицы CSS (такие как проценты) не справляются с поставленной задачей.

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

 

 

Высота области просмотра (vh) и ширина области просмотра (vw)

Область просмотра (viewport) обозначает размер исходного содержащего блока. Другими словами, область просмотра – это вся область внутри окна браузера или любая другая видимая область на экране.

Высота области просмотра (viewport height) – это процент от высоты фактического окна просмотра, который обозначается единицами vh, а ширина области просмотра (viewport width) – это процент от ширины фактического окна просмотра, который обозначается единицами vw.

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

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

 

Вы можете использовать единицы измерения только в свойствах ширины и высоты, но не для других свойств. Например, вы не можете установить размер отступов (padding или margin), используя единицы vw и vh.

 

 

Отличие единиц просмотра от процентов

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

 

 

Практический пример использования единиц просмотра

Единицы просмотра чаще всего используются для верстки полноэкранных разделов.

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

<body>
 <section class="section_01"></section>
 <section class="section_02"></section>
 <section class="section_03"></section>
</body>

 

 

В CSS стилях мы используем 100vh для значения высоты и 100% для свойства ширины раздела. Для ширины мы не используем единицы vw, поскольку по умолчанию полосы прокрутки также добавляются к размеру области просмотра. Если бы мы использовали для свойства ширины значение 100vw, тогда бы появилась горизонтальная полоса прокрутки в нижней части окна браузера (а это нам не нужно).

<style>
 html {margin: 0; padding: 0;}
 section {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100vh;
 }
 .section_01 {background-image: url('https://picsum.photos/id/15/1920/1080');}
 .section_02 {background-image: url('https://picsum.photos/id/25/1920/1080');}
 .section_03 {background-image: url('https://picsum.photos/id/35/1920/1080');}
</style>

 

 

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

 

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

Сверстайте этот пример, и вы увидите, что «отзывчивость» при использовании vh действительно работает.

 

 

Минимальная область просмотра (vmin) и максимальная (vmax)

Единицы vmin и vmax позволяют вам получать доступ к размеру меньшей, или большей стороны области просмотра, в соответствии со следующими правилами:

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

 

 

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

Аналогично, для альбомной ориентации экрана 100vmin равен 100vh, поскольку область просмотра меньше по вертикали, чем по горизонтали. И, конечно, 100vmax здесь будет равным 100vw.

 

 

Практический пример: сделать заголовок удобочитаемым на любом экране

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

Для решения этой задачи вы можете использовать следующий практический код в CSS стилях:

<style>
 h1 {font-size: 10vmin; padding: 0 1%; text-align: center;}
</style>

 

 

 

Поддержка единиц просмотра браузерами

На сегодняшний день, поддержка браузерами единиц просмотра довольно неплохая. Однако учтите, что некоторые версии IE и Edge не поддерживают vmax. Кроме того, у iOS 6 и 7 есть проблема с единицей vh, которая была исправлена в iOS 8 версии.

 

Recent Posts

Многофункциональное устройство коверлок: ключевые особенности

Существует много разновидностей швейного оборудования, которые открывают большие возможности для совершенствования навыков. Один из самых… Read More

15/01/2021

Как сделать отложенную загрузку для HTML, iframe и встроенного видео

Ленивая (или отложенная) загрузка (Lazy loading) – это популярный метод асинхронного обращения к адресу ресурса,… Read More

13/01/2021

Google Search Console – Проблема с CLS и как ее решить

Мы ранее писали о нововведении в инструменте для вебмастеров Google Search Console – Основных интернет-показателях.… Read More

11/01/2021

Самые красивые водопады мира (часть 3/3)

Водопад является одним из самых волнующих и красивых творений матушки-природы в нашем мире. По всему… Read More

08/01/2021

Что такое Основные интернет-показатели в Google Search Console?

В конце мая прошлого года, а точнее 28 мая 2020 года, Google начал более активно… Read More

07/01/2021

Как добавить Google reCAPTCHA на WordPress сайт без плагинов

Если на вашем WordPress сайте постоянно регистрируются спамные пользователи/боты, вы устали ежедневно очищать раздел комментариев… Read More

05/01/2021