От автора: с первого показа вьюпорт единиц в CSS прошло несколько лет. Это реально адаптивные единицы измерения длины, их значение меняется под размеры окна браузера. Если вы слышали о них, но никогда не вдавались в детали, эта статья для вас.
Единицы измерения и их значение
В CSS есть 4 типа вьюпорт единиц: vh, vw, vmin и vmax.
Viewport height (vh) – основаны на высоте вьюпорта. Значение 1vh равно 1% высоты вьюпорта.
Viewport width (vw) – основаны на ширине вьюпорта. Значение 1vw равно 1% ширины вьюпорта.
Viewport minimum (vmin) – основаны на минимальной стороне вьюпорта. Если высота вьюпорта меньше ширины, значение 1vmin будет равно 1% от высоты. Точно так же если ширина меньше высоты, то 1vmin будет равен 1% от ширины вьюпорта.
Viewport maximum (vmax) – основаны на большой стороне вьюпорта. Если высота вьюпорта больше ширины, то значение 1vmax будет равно 1% от высоты вьюпорта. Если ширина вьюпорта больше высоты, то 1vmax будет равен 1% от ширины.
Давайте посмотрим, какие значения мы получим в разных ситуациях:
Если вьюпорт 1200px в ширину и 1000px в высоту, то значение 10vw будет равно 120px, а 10vh – 100px. Ширина вьюпорта больше высоты, поэтому 10vmax будет равно 120px, а 10vmin – 100px.
Если повернуть устройство, чтобы ширина стала 1000px, а высота 1200px, то 10vh будет равно 120px, а 10vw превратится в 100px. Интересно, но 10vmax так и останется 120px, потому что теперь значение определяется по высоте вьюпорта. Значение 10vmin также останется 100px.
Если сузить окно браузера до 1000px в ширину и 800px в высоту, то 10vh будет 80px, а 10vw будет 100px. Точно так же значение 10vmax станет 100px, и 10vmin – 80px.
На данный момент вьюпорт единицы для вас могут несильно отличаться от процентов, однако разница велика. В случае с процентами ширина и высота дочерних элементов зависят от родительского блока. Пример:
В демо видно, как ширина первого дочернего элемента занимает 80% ширины от родителя. У второго дочернего элемента ширина равна 80vw, что делает его шире родителя.
Применение вьюпорт единиц измерения
Эти единицы основаны на размерах вьюпорта, поэтому их очень удобно использовать в ситуациях, когда ширина, высота или размеры элементов должны изменяться в зависимости от размеров вьюпорта.
Полноэкранные фоновые изображения и секции
В сети довольно часто можно встретить фоновые изображения на элементах, которые занимают весь экран. Точно так же можно сделать в дизайне сайта, чтобы отдельная секция о товаре или услуге занимала весь экран. В таких случаях можно задать ширину элементов в 100%, а высоту в 100vh.
Разберем следующий пример HTML:
|
1 2 3 |
<div class="fullscreen a"> <p>a<p> </div> |
CSS ниже растянет секцию под фоновое изображение на всю ширину:
|
1 2 3 4 5 6 7 8 9 |
.fullscreen { width: 100%; height: 100vh; padding: 40vh; } .a { background: url('path/to/image.jpg') center/cover; } |
Идеально подходящие заголовки
Вы могли слышать или даже использовать jQuery плагин FitText. С помощью этого плагина можно масштабировать заголовки таким образом, чтобы они занимали всю ширину родительского элемента. Как я сказала раньше, значение вьюпорт единиц напрямую зависит от размеров вьюпорта. То есть если указывать font-size заголовков во вьюпорт единицах, то они идеально будут подходить под каждый экран. Если изменится ширина вьюпорта, браузер автоматически изменит заголовок. Нужно лишь определить правильное первоначальное значение для font-size.
Главная проблема с font-size и вьюпорт единицами заключается в том, что размер текста будет сильно варьироваться в зависимости от вьюпорта. Например, font-size со значением 8vw сделает заголовок размером в 96px для вьюпорта с шириной 1200px, 33px для ширины в 400px и 154px для ширины вьюпорта в 1920px. Шрифт может быть, как слишком большим, так и слишком маленьким для удобного чтения. Более подробно прочитать о правильной установке размеров текста с помощью единиц измерения и функции calc() можно в замечательной статье о типографике на вьюпорт единицах.
Легкое центрирование элементов
Вьюпорт единицы могут очень сильно помочь, когда необходимо поместить элемент точно в цент экрана пользователя. Если высота элемента известна, то нужно всего лишь задать верхнее и нижнее значение свойства margin в [(100 — height)/2]vh.
|
1 2 3 4 5 |
.centered { width: 60vw; height: 70vh; margin: 15vh auto; } |
Что нужно помнить
Если вы решили использовать вьюпорт единицы в своих проектах, вам нужно помнить о нескольких вещах.
Аккуратнее задавайте ширину элемента с помощью вьюпорт единиц. Если на корневом элементе свойство overflow задано в auto, браузеры решат, что полосы прокрутки нет. Это сделает элементы слегка шире ожидаемого. Разберем пример с 4 блоками div со следующими стилями:
|
1 2 3 4 5 |
div { height: 50vh; width: 50vw; float: left; } |
…обычно нам нужно, чтобы каждый div занимал четверть экрана. Однако ширина div’ов вычисляется с условием, что нет полосы прокрутки, что делает div’ы чуть-чуть шире, чем нужно.
Проблема решится, если ширину задать на 50%. Вывод – используйте проценты для установки ширины блоковых элементов, чтобы полоса прокрутки не вмешивалась в вычисления ширины блоков.
Похожая проблема может возникать на мобильных устройствах из-за адресной строки, которая появляется и исчезает в зависимости от прокрутки страницы. Это изменит высоту вьюпорта, и пользователь заметит резкий прыжок при просмотре контента.
Поддержка в браузерах
По данным с сайта caniuse вьюпорт единицы поддерживаются во всех основных браузерах. Однако вам нужно знать, что парочка багов и проблем еще не решена. Например, IE9 поддерживает vm вместо vmin, а IE10+/Edge не поддерживают vmax. Chrome не печатает элементы, чьи размеры заданы во вьюпорт единицах.
Если копнуть немного глубже, то на Caniuse можно посмотреть поддержку браузеров в различных регионах. Например, 97,5% людей в США используют браузеры с поддержкой вьюпорт единиц. В Азии же значение падает до 73,76% и до 45,28% в Индии. Низкий процент в Индии обусловлен тем, что множество людей для хранения данных используют UC Browser. Эта информация должна помочь вам в принятии решения, использовать вьюпорт единицы в своих проектах или нет.
Заключение
В этой статье мы коротко прошлись по значению, применению и поддержке вьюпорт единиц. Если вам известны другие интересные способы применения или проблемы в браузерах, пишите в комментариях.
Автор: Asha Laxmi
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
