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

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

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

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

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

Высота области просмотра (vh). Эта единица основана на высоте области просмотра. Значение 1vh равно 1% от высоты области просмотра.

Ширина области просмотра (vw). Эта единица основана на ширине области просмотра. Значение 1vw равно 1% ширины области просмотра.

Минимальная сторона области просмотра (vmin). Эта единица основана на меньшей стороне области просмотра. Если высота области просмотра меньше ширины, значение 1vmin будет равно 1% от высоты области просмотра. Точно так же, если ширина области просмотра меньше, чем высота, значение 1vmin будет равно 1% ширины области просмотра.

Максимальная сторона области просмотра (vmax). Эта единица основана на большей стороне области просмотра. Если высота области просмотра больше ширины, значение 1vmax будет равно 1% от высоты области просмотра. Точно так же, если ширина области просмотра больше, чем высота, значение 1vmax будет равно 1% ширины области просмотра.

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

Если область просмотра имеет ширину 1200px и высоту 1000px, значение 10vw будет 120px, а значение 10vh будет 100px. Поскольку ширина области просмотра больше его высоты, значение 10vmax будет 120px, а значение 10vmin будет 100px.

Если устройство поворачивается так, что область просмотра будет иметь 1000 пикселей в ширину и 1200 пикселей в высоту, значение 10vh будет 120 пикселей, а значение 10vw будет 100 пикселей. Интересно, что значение 10vmax все равно будет 120px, потому что теперь оно будет определяться на основе высоты области просмотра. Точно так же значение 10vmin по-прежнему будет 100px.

Если вы измените размер окна браузера так, чтобы область просмотра будет шириной 1000 пикселей и высотой 800 пикселей, значение 10vh станет 80 пикселей, а значение 10vw станет 100 пикселей. Аналогично, значение 10vmax станет 100px, а значение 10vmin станет 80px.

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

Как вы можете видеть, ширина первого дочернего элемента установлена равной 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.