Калибровка с помощью CSS3 VW и VH

SS3 представила несколько новых фич. Итак, Вы слишали о px, pt, em. А сейчас мы рассмотрим vw и vh.
Часто, во время дизайна нам нужно сделать так, чтобы блок помещался в размеры экрана. Раньше мы бы использовали JavaScript. Проверяли бы размеры видимой области и токда бы изменяли размеры до нужных соответственно. Если пользователь изменяет размер окна браузера тогда скрипт запускается обратно, чтобы изменить размеры нужного нам элемента. 
С помощью vw/vh мы можем изменять розмер элемента относительно видимово окна. vw/vh интерестны потому, один юнит равен 1/100 ширины видимой области. К примеру, чтобы сделать элемент шириной в 100% относительно видимой области нам нужно только написать wdth: 100vw.

Как это использовать нормально
Lightbox-и являются лучшими кандидатами для использования vw и vh, так как lightbox-и зачастую выравнивают относительно видимой области. 
Хорошим тоном использования этих юнитов будет контент, который розмещен в пределах видимой области. Сейчас обьясню, что я имею ввиду. К примеру, я могу вставить в контекст несколько скриншотов, и я не хочу, чтобы  эти скриншоты превышали высоту видимой области, тогда в этом случае, я могу поставить максимальное значения высоты на эти скриншоты

img { max-height:95vh; }
В этом случае, я ставлю высоту в 95, чтобы елемент не превышал высоты видимой области.

 

 

Тема: 
LikeMe: