[Перевод] Установка размеров с помощью единиц vw и vh

В CSS3 появились новые единицы измерения. (Я, кажется, уже говорил об этом.^eng) Вы уже слышали о px, pt, em и новых rem. Давайте рассмотри еще несколько: vw и vh.



Часто в макете есть элементы, которые гарантировано должны умещаться во вьюпорт браузера. В общем случае для этого используется JavaScript. Проверям размер вьюпорта и изменяем размеры элементов соответствующим образом. Если пользователь изменяет размер окна браузера, то процедура повторяется.



С помощью vw/vh мы можем устанавливать размер элементов относительно размера вьюпорта. Единицы vw/vh интересны тем, что 1vw — единица равная 1/100'ой ширины вьюпорта. Что бы присвоить элементу ширину, равную ширине вьюпорта, например, надо установить width:100vw.

Как это можно использовать

Лайтбоксы — прекрасный кандидат для использования vw и vh, так как обычно позиционируется относительно вьюпорта, однако мне кажеться, что position:fixed со значениями top, bottom, left и right использовать проще, так как можно вообще не устанавливать высоту и ширину.



Можно использовать новые единицы измерения для установки размеров элементов, которые находятся в нормальном потоке. Например, я могу разместить на странице скриншоты. Высота этих скриншотов не должна превышать высоту вьюпорта. Для этого я могу установить максимальную высоту изображений:



img { max-height:95vh; }



В данном случае я устанавливаю высоту 95vh что бы оставить немного места вокруг, когда они на экране.

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

Если rem поддерживаются почти всеми основными браузерами включая IE9, то с использованием vw и vh стоит повременить. На данный момент их поддерживает только Internet Explorer 9.

Ссылки

Спецификация^eng









Источник: Хабрахабр - Веб-разработка
Оригинальная страница: [Перевод] Установка размеров с помощью единиц vw и vh