Водич за ЦСС Виевпорт Унитс вв, вх, вмин, вмак

Дужина приказа у процентима, или јединице приказа као што се они чешће наводе, одговарајући ЦСС јединице које вам омогућавају да дефинишете димензије као проценат ширине или дужине оквира за приказ. Виевпорт јединице могу бити веома корисне у случајевима у којима су друге одговарајући ЦСС јединице, као што су проценти тешко радити.

Иако В3Ц документација на јединицама приказа садржи све што се може ставити у теорију, није баш опширно. Дакле, у овом чланку ћемо погледати како ове ЦСС јединице рад у пракси.

Висина приказа прозора (вх) и ширина приказа (вв)

В3Ц дефинира виевпорт као “величина почетног блока”. Другим ријечима, приказ је подручје који се налазе у прозору прегледача или било коју другу област гледања на екрану.

Тхе вв и вх јединице означава проценат ширине и висине стварног оквира за приказ. Могу узети вриједност између 0 и 100 према следећим правилима:

 100вв = 100% ширине приказа 1вв = 1% ширине приказа 100вх = 100% висине приказа 1вх = 1% висине приказа 

Разлике у процентуалним јединицама

Дакле, како се јединице приказа разликују од постотних јединица? Проценат јединица наслеђује величину свог родитељског елемента док јединице приказа не. Јединице приказа се увек израчунавају као проценат величине приказа. Као резултат, елемент дефинисан јединицама видног поља може премашити величину његовог родитеља.

Пример: Делови целог екрана

Секције на целом екрану су вероватно најзаступљенији случајеви употребе јединица за приказ.

Тхе ХТМЛ је прилично једноставан; само имамо један испод другог и желимо да свако од њих покријте цео екран (али не више).

У ЦСС-у користимо 100вх као хеигхт вредност и 100% као видтх. Ми не користимо вв овде као подразумевано, сцроллбарс су такође додани до величине приказа. Дакле, ако користимо видтх: 100вв; правило а хоризонтал сцроллбар ће се појавити на на дну прозора прегледача.

 * маргин: 0; паддинг: 0;  сецтион бацкгроунд-сизе: цовер; позиција у позадини: центар; ширина: 100%; висина: 100вх;  .сецтион-1 бацкгроунд-имаге: урл ('хттпс://ассетс.хонгкиат.цом/уплоадс/цсс-виевпорт-унитс-вв-вх-вмин-вмак/имг1.јпг');  .сецтион-2 бацкгроунд-имаге: урл ('хттпс://ассетс.хонгкиат.цом/уплоадс/цсс-виевпорт-унитс-вв-вх-вмин-вмак/имг2.јпг');  .сецтион-3 бацкгроунд-имаге: урл ('хттпс://ассетс.хонгкиат.цом/уплоадс/цсс-виевпорт-унитс-вв-вх-вмин-вмак/имг3.јпг');  

На гиф демо-у испод, то можете видјети вх је заиста одговарајућа јединица.

Према В3Ц документима, горе поменуто проблем са хоризонталним клизачем може се ријешити додавањем оверфлов: ауто; правило на основни елемент. Ово решење ради само делимично, ипак. Хоризонтални клизач, заиста, нестаје, али видтх је још увек се израчунава на основу ширине приказа (сидебар укључен), тако да ће елементи бити мало већи него што би требали бити.

Рекао бих, не бих се усудио користити вв јединица на димензионисање елемената целог екрана због овог разлога. Не треба нам чак ни као ширина: 100%; правило ради савршено. Са приказима преко целог екрана, прави изазов је увек био како поставите одговарајућу вредност висине анд тхе вх Јединица даје бриљантно решење за то.

Други случајеви употребе

Ако сте заинтересовани друге случајеве употребе вв и вх Луллабот има одличан чланак који наводи а неколико примера из стварног живота (са кодним демоима), као што су:

• Картице са фиксним односом.
• Чување елемента краће од екрана.
• Скалирање текста.
• Прекидање посуде.

Опера.дев такође има кратак водич о томе како можете да искористите утицај вв јединица у креирање одговарајућих типографија.

Не можете користити само јединице приказа на видтх и хеигхт али на било којој другој. На пример, можете подесите величину полица и маргина помоћу вв и вх јединица.

Мин.вмин) & макс.вмак)

Тхе вмин и вмак јединице вам омогућују приступ величине мање или веће стране прозора за приказ, према следећим правилима:

 100вмин = 100вв или 100вх, шта год је мање 1вмин = 1вв или 1вх, које је мање 100вмак = 100вв или 100вх, које је веће 1вмак = 1вв или 1вх, које год је веће 

Дакле, у случају а портрет оријентација, 100вмин је једнако 100вв, као што је оквир за приказ мањи хоризонтално него вертикално. Из истог разлога, 100вмак ће бити једнако 100вх.

Слично томе, у случају а пејзажна оријентација, 100вмин је једнако 100вх, као што је оквир за приказ мањи вертикално него хоризонтално. И наравно, 100вмак ће бити једнако 100вв овде.

Пример: Направите читање јунака на сваком екрану

Тхе вмин и вмак јединице су много мање познате него вв и вх. Међутим, они се могу одлично користити као замјена за оријентацију @медиа куериес. На пример, вмин и вмак може бити од користи када имате елементе који могу изгледати чудно у различитим омјерима.

Нови код има одличан туторијал у којем се расправља о томе како можете држите херој текст читљивим на сваком екрану, користећи вмин јединица. Текстови хероја су склони изгледу сувише је мали на мобилним и превелик на великим мониторима.

Ево главне идеје њиховог решења:

 х1 фонт-сизе: 20вмин; фонт-фамили: Авенир, санс-сериф; фонт-веигхт: 900; тект-алигн: центар;  

У демону Цодепен, можете проверити како вмин решава проблем читљивости јунака. Приступите “Цела страна” онда поглед на Цодепен промените величину прозора прегледача и хоризонтално и вертикално да бисте видели како се мења херојски текст.

Подршка за претраживач

Као што можете видјети на доњој табели ЦанИУсе, подршка за прегледач је релативно добра за јединице приказа. Међутим, имајте на уму да неке верзије ИЕ и Едге не подржавају вмак. Такође, иОС 6 и 7 имају проблем са вх јединица, који је фиксиран у иОС 8.