Единицы измерения CSS на основе области просмотра

От автора: прошло несколько лет с тех пор, как единицы измерения на основе области просмотра были впервые представлены в CSS. Они действительно являются «адаптивными единицами длины» в том смысле, что их значение меняется каждый раз, когда изменяется размер окна браузера. Если вы слышали об этих единицах раньше, но хотите узнать о них подробнее, эта статья может вам помочь.

Единицы и их значения

В CSS есть четыре единицы измерения на основе области просмотра. Это vh, vw, vmin и vmax.

Посмотрим, какие значения будут у этих единиц в разных ситуациях:

На этом этапе единицы измерения на основе области просмотра могут выглядеть аналогично процентам. Тем не менее, они очень разные. В случае процентов ширина или высота дочернего элемента определяется относительно его родителя. Вот пример:

Как вы можете видеть, ширина первого дочернего элемента установлена равной 80% ширины его родительского элемента. Однако второй дочерний элемент имеет ширину 80vw, что делает его шире, чем его родительский элемент.

Применение единиц измерения на основе области просмотра

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

Полноэкранные фоновые изображения или разделы

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

В качестве примера возьмем следующий HTML:

<div class="fullscreen a"> <p>a<p>
</div>

Вы можете создать фоновое изображение полноэкранного раздела, используя:

.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. Это может сделать шрифт слишком большим или слишком маленьким.

Простое центрирование элементов

Единицы измерения на основе области просмотра могут быть очень полезны, когда вы хотите поместить элемент точно в центр экрана. Если вы знаете высоту элемента, вам просто нужно установить верхнее и нижнее значение свойства margin равным [(100 — height)/2]vh:

.centered { width: 60vw; height: 70vh; margin: 15vh auto;
}

Однако в настоящее время мы можем использовать Flexbox или CSS Grid для центрирования элементов как по вертикали, так и по горизонтали.

Что нужно помнить

Если вы решите использовать в своих проектах единицы измерения на основе области просмотра, есть несколько вещей, о которых следует помнить.

Будьте осторожны при настройке ширины элемента. Это связано с тем, что когда для свойства overflow корневого элемента установлено в значение auto, браузеры предполагают, что полосы прокрутки не существуют. Это сделает элементы немного шире, чем вы ожидаете. Рассмотрим разметку с четырьмя элементами div:

div { height: 50vh; width: 50vw; float: left;
}

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

Установка ширины дивов не 50vw, а 50% решит эту проблему. Вывод заключается в том, что вы должны использовать проценты при установке ширины для блочных элементов, чтобы полосы прокрутки не мешали вычислению их ширины.

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

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

Судя по данным, доступным на Caniuse, все основные браузеры поддерживают эти единицы измерения. Тем не менее, есть несколько ошибок и проблем, о которых вы должны знать при использовании единиц измерения на основе области просмотра. Например, в Firefox есть задокументированная ошибка, связанная с тем, что 100vh не оказывает никакого влияния на элемент, для свойства display которого установлено table. Опять же, Chrome не поддерживает единицы измерения на основе области просмотра для ширины границ, пробелов столбцов, значений преобразования, теней полей или в calc() вплоть до версии 34. Ознакомьтесь с данными Caniuse для получения полного списка известных ошибок.

Автор: Asha Laxmi, Maria Antonietta Perna

Источник: https://www.sitepoint.com

Редакция: Команда webformyself.