Прошло несколько лет с тех пор, как в CSS впервые были представлены единицы измерения окна просмотра. Это действительно «отзывчивые единицы длины» в том смысле, что их значение меняется каждый раз при изменении размера окна браузера. Если вы слышали об этих устройствах раньше, но никогда не узнавали о них подробно, эта статья может вам помочь.
Единицы и их значение
В CSS есть четыре единицы измерения, основанные на области просмотра. Это vh, vw, vminи vmax.
Высота области просмотра (vh). Эта единица измерения основана на высоте окна просмотра. Значение 1vhравно 1% высоты области просмотра.
Ширина области просмотра (vw). Эта единица основана на ширине области просмотра. Значение 1vwравно 1% ширины области просмотра.
Минимум области просмотра (vmin). Эта единица основана на меньшем размере окна просмотра. Если высота области просмотра меньше ширины, значение 1vminбудет равно 1% от высоты области просмотра. Точно так же, если ширина области просмотра меньше высоты, значение 1vminбудет равно 1% от ширины области просмотра.
Максимум области просмотра (vmax). Эта единица основана на большем размере окна просмотра. Если высота области просмотра больше ширины, значение 1vmaxбудет равно 1% высоты области просмотра. Точно так же, если ширина области просмотра больше высоты, значение 1vmaxбудет равно 1% от ширины области просмотра hte.
Посмотрим, каково будет значение этих единиц в разных ситуациях:
Если окно просмотра имеет ширину 1200 пикселей и высоту 1000 пикселей, значение 10vwбудет равно 120 пикселей, а значение 10vhбудет равно 100 пикселей. Поскольку ширина окна просмотра больше, чем его высота, значение 10vmaxбудет равно 120 пикселей, а значение 10vminбудет равно 100 пикселей.
Если теперь устройство повернуто так, что область просмотра станет шириной 1000 пикселей и высотой 1200 пикселей, значение 10vhбудет равно 120 пикселей, а значение 10vwбудет равно 100 пикселей. Интересно, что значение по- 10vmaxпрежнему будет 120 пикселей, потому что теперь оно будет определяться на основе высоты области просмотра. Точно так же значение по- 10vminпрежнему будет 100px.
Если вы измените размер окна браузера так, чтобы область просмотра стала шириной 1000 пикселей и высотой 800 пикселей, значение станет равным 80 пикселей, 10vhа значение 10vwстанет равным 100 пикселей. Точно так же значение 10vmaxстанет равным 100px, а значение станет равным 10vmin80px.
На этом этапе единицы области просмотра могут звучать похоже на проценты. Однако они очень разные. В случае процентов ширина или высота дочернего элемента определяется относительно его родителя. Вот пример:
Как видите, ширина первого дочернего элемента установлена равной 80% ширины его родителя. Однако второй дочерний элемент имеет ширину 80vw, что делает его шире, чем его родитель.
Применение единиц видового экрана
Поскольку эти единицы измерения основаны на размерах области просмотра, их очень удобно использовать в ситуациях, когда необходимо задать ширину, высоту или размер элементов относительно области просмотра.
Полноэкранные фоновые изображения или разделы
Очень часто фоновые изображения устанавливаются на элементы, которые полностью покрывают экран. Точно так же вы можете создать
В качестве примера возьмем следующий HTML:
a
Вы можете получить раздел фонового изображения полной ширины, используя приведенный ниже CSS:
.fullscreen {
width: 100%;
height: 100vh;
padding: 40vh;
}
.a {
background: url ('path/to/image.jpg’) center/cover;
}
И первое, и второе изображения взяты с Pixabay.
Создавайте идеально подходящие заголовки
Плагин FitText jQuery можно использовать для масштабирования заголовков таким образом, чтобы они занимали всю ширину родительского элемента. Как мы упоминали ранее, значение единиц измерения области просмотра напрямую зависит от размера области просмотра. Это означает, что если вы используете единицы вьюпорта для установки
Одна из основных проблем с такой настройкой
Легко центрируйте свои элементы
Единицы области просмотра могут быть очень полезны, когда вы хотите поместить элемент точно в центр экрана вашего пользователя. Если вы знаете высоту элемента, вам просто нужно установить верхнее и нижнее значение 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 немного шире, чем требуется, чтобы они отображались рядом.
Установка ширины div от 50vwдо 50%решит эту проблему. Вывод состоит в том, что вы должны использовать проценты при установке ширины для блочных элементов, чтобы полосы прокрутки не мешали вычислению их ширины.
Аналогичная проблема также может возникать на мобильных устройствах
Поддержка браузера
Основываясь на данных, доступных на Caniuse, кажется, что все основные браузеры поддерживают эти устройства. Тем не менее, есть еще несколько ошибок и проблем, о которых вам следует знать при использовании единиц измерения окна просмотра. Например, в Firefox есть задокументированная ошибка, при которой 100vhне действует ни один элемент со displayсвойством, установленным на table. Опять же, Chrome не поддерживает единицы области просмотра для ширины границ, промежутков между столбцами, значений преобразования, теней блоков или in calc () до версии 34. Проверьте Caniuse для получения полного списка известных ошибок.
Вывод
В этой статье мы кратко рассмотрели значение, приложения и поддержку браузерами единиц просмотра. Если вы знаете о
