Поток Контактная информация Наши работы Вйо Про нас

vh и vw

Час­то стал­ки­вал­ся с тем, что мои за­дум­ки на счет ор­га­низа­ции раз­ме­ров на стра­нице ока­зыва­ют­ся слиш­ком слож­ны­ми.

До­пус­тим, я хо­чу по­делить стра­ницу на че­тыре ко­лон­ки. А меж­ду ко­лон­ка­ми, в свою оче­редь, сде­лать от­сту­пы в од­ну де­сятую стра­ницы. Зву­чит прос­то. По­ка я не до­бав­лю от­сту­пы у всей этой сис­те­мы сле­ва и спра­ва. Тут уже нель­зя при­менить про­цен­ты — они-то пос­чи­та­ют все от­но­ситель­но кон­тей­не­ра.

Или вот за­дача: хо­чу, что­бы все кар­тинки на сай­те всег­да по­меща­лись в эк­ран. Пер­вая мысль (как пра­вило пер­вая же на от­прав­ку в му­сор­ник соз­на­ния) — на­писать не­боль­шой скрипт, ко­торый бу­дет за­гонять все img в нуж­ные мне раз­ме­ры. И window.onResize мне в по­мощь. Зву­чит мак­си­маль­но уны­ло.

Так вот, есть та­кие клас­сные ве­личи­ны: vh и vw, ко­торые рас­шифро­выва­ют­ся как viewport width и height со­от­ветс­твен­но. Да, имен­но это они и де­ла­ют — бе­рут часть от вы­соты или ши­рины ок­на, вне за­виси­мос­ти от то­го, где на­ходит­ся эле­мент.

Те­перь я мо­гу ска­зать

img {
  max-height: 100vh;
}

и не бес­по­ко­ить­ся, что что-то не вле­зет поль­зо­вате­лю в эк­ран.

Прек­расно еще и то, что они под­держи­ва­ют­ся поч­ти вез­де.