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