Единицы для масштабирования элементов в зависимости от размеров окна

Всем привет

Часто в дизайне сайта есть элементы, которые гарантировано должны умещаться в окно просмотра браузера (по другому -  вюьпорт).

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

В спецификации CSS3 есть новые единицы размерности, которые значительно облегчают это задание  - vw и vh.

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

Читайте также: Лучшие CSS эффекты при наведении курсора на изображение

Где это может пригодиться?

Единицы vw и vh можно использовать в разных случаях, в частности для лайтбоксов, которые позиционируются относительно окна просмотра (вьюпорта) и в общем для масштабирования элементов дизайна.

vw

Единица равна 1% от ширины начального содержащего блока.
Например, если ширина окна просмотра 200мм, размер шрифта элементов h1 будет 16 мм (т.е. (8 × 200 мм) / 100 = 16).

Для элемента применяем такой код:

h1 { font-size: 8vw }

vh

Единица равна 1% от высоты исходного контейнера.
По аналогии, если высота окна просмотра 800мм, размер блока comment будет 240 мм ( т.е. (30 х 800 мм) / 100 = 240)

Для элемента применяем такой код:

.comment { height: 40vh }

Есть еще такие единицы как vmin и vmax. Vmin равна наименьшему значению ‘vw’ или ‘vh’, а vmax наоборот - наибольшему значению ‘vw’ или ‘vh’.


Здесь пример масштабирования изображения (изменения его размеров).  Суть в чем : при изменении размера окна просмотра  синхронно будет изменяться и размер изображения.

Попробуйте изменить ширину вьюпорта и посмотрите, как изменяется изображение. В примере я задал такое значение для элемента img:

img {width: 50vw; height: 50 vh;}

Как вы поняли с примеров выше, я задал ширину и высоту, которые равны 50% от размеров вьюпорта.

На этом все Свои вопросы вы можете оставить в комментариях ниже
Ах да,  я думаю, ближайшее время будем встречаться почаще, потому что:

Заодно поздравляю всех студентов с этим чудом, в частности своих одногруппников
До новых встреч ;)