Многи студенти респонзивног веб дизајна имају потешкоћа користећи проценте за вредности ширине. Конкретно, постоји забуна око тога како прегледач израчунава те проценте. Испод ћете пронаћи детаљно објашњење како проценти функционишу за прорачун ширине на одговарајућој веб локацији.
Коришћење пиксела за вредности ширине
Када користите пиксела као вредност ширине, резултати су врло јасни. Ако користиш ЦСС да бисте поставили вредност ширине елемента у заглављу документа на 100 пиксела ширине, тај елемент ће бити исте величине као она коју сте поставили на 100 пиксела ширине у садржају или подножју веб странице или у другим деловима странице. Пиксели су апсолутна вредност, тако да је 100 пиксела 100 пиксела, без обзира где се у документу појављује елемент. Нажалост, иако су вредности пиксела лако разумљиве, оне не функционишу добро са одговарајућим веб локацијама.
Етхан Марцотте је сковао тај термин „Респонзивни веб дизајн“, објашњавајући да овај приступ садржи 3 кључна принципа:
- Течна мрежа
- Течни медији
- Упити за медије
Те прве две тачке, флуидна мрежа и флуидни медији постижу се употребом процената, уместо пиксела, за одређивање величине.
Коришћење процената за вредности ширине
Када користите проценте за утврђивање ширине елемента, стварна величина коју елемент приказује ће се разликовати у зависности од тога где се налази у документу. Проценти су релативна вредност, што значи да је приказана величина у односу на остале елементе у вашем документу.
На пример, ако поставите ширину датотеке слика до 50%, то не значи да ће се слика приказивати на половини своје нормалне величине. Ово је уобичајена заблуда.
Ако је слика заправо широка 600 пиксела, употреба ЦСС вредности за приказ на 50% не значи да ће бити широка 300 пиксела у веб прегледачу. Ова процентуална вредност израчунава се на основу елемента који садржи ту слику, а не стварне величине саме слике. Ако је контејнер (који може бити одељење или неки други ХТМЛ елемент) широк 1000 пиксела, слика ће се приказати на 500 пиксела, јер је та вредност 50% ширине контејнера. Ако је елемент који садржи елемент широк 400 пиксела, тада ће се слика приказати само на 200 пиксела, јер је та вредност 50% контејнера. Дотична слика овде има 50% величине која у потпуности зависи од елемента који је садржи.
Запамтите, одзивни дизајн је флуидан. Изгледи и величине ће се мењати како се величина екрана / промене уређаја. Ако о овоме размишљате у физичком, не-мрежном смислу, то је као да имате картонску кутију коју пуните материјалом за паковање. Ако кажете да кутија треба да буде напола напуњена тим материјалом, количина паковања која вам је потребна варираће у зависности од величине кутије. Исто важи и за процентуалне ширине у веб дизајну.
Проценти засновани на осталим процентима
У примеру слике / контејнера користили смо вредности пиксела за елемент који садржи како бисмо показали како ће се прилагодљива слика приказати. У стварности, елемент који садржи садржи такође постављен као проценат, а слика или други елементи унутар тог контејнера добиће своје вредности на основу процента процента.
Ево још једног примера.
Рецимо да имате веб локацију на којој је цела веб локација садржана у одељењу са класом „контејнер“ (уобичајена пракса веб дизајна). Унутар тог одељења налазе се још три одељења која ћете на крају стилизовати да се приказују као 3 вертикална стуба.
Сада можете да користите ЦСС да подесите величину тог дела „контејнера“ на 90%. У овом примеру одељење контејнера нема други елемент који га окружује, осим тела, које нисмо поставили ни на једну одређену вредност. Подразумевано, тело ће се приказати као 100% прозора прегледача. Стога ће проценат одељења „контејнер“ бити заснован на величини прозора прегледача. Како се величина тог прозора прегледача мења, тако ће се променити и величина овог „контејнера“. Дакле, ако је прозор прегледача широк 2000 пиксела, ова подела ће се приказати на 1800 пиксела. Ово се израчунава као 90 процената из 2000. године (2000 к .90 = 1800)), што је величина прегледача.
Ако је сваки од одељења „цол“ који се налази унутар „контејнера“ подешен на величину од 30%, тада ће сваки од њих у овом примеру бити широк 540 пиксела. Ово се израчунава као 30% од 1800 пиксела на којима контејнер приказује (1800 к .30 = 540). Ако бисмо променили проценат тог контејнера, ове унутрашње поделе би се промениле и у величини коју приказују, јер зависе од тог елемента контејнера.
Претпоставимо да прозори прегледача остају широки 2000 пиксела, али мењамо процентуалну вредност контејнера на 80% уместо на 90%. То значи да ће се сада приказивати на 1600 пиксела ширине (2000 к, 80 = 1600). Чак и ако не променимо ЦСС за величину наша 3 „цол“ одељења и оставимо их на 30%, они ће сада се другачије приказују јер њихов садржи елемент, а то је контекст по којем су величине, има промењено. Та три одељења ће се сада приказивати по 480 пиксела ширине, што је 30% од 1600, или величина контејнера 1600 к .30 = 480).
Узимајући ово још даље, ако се унутар једног од ових одељења „цол“ налази слика и та слика је одређена у процентима, контекст за њено одређивање величине би био сам „цол“. Како се та подела „цол“ мењала у величини, тако би се мењала и слика унутар ње. Дакле, ако се величина прегледача или „контејнера“ промени, то би утицало на три одељења „цол“, што би заузврат промените величину слике унутар „цол.“ Као што видите, све су то повезане када је у питању процењивање величине вредности.
Када узмете у обзир како ће се елемент унутар веб странице приказати када се за његову ширину користи процентуална вредност, морате да разумете контекст у којем се тај елемент налази у ознакама странице.
Укратко
Проценти играју кључну улогу у креирању изгледа за одговарајуће веб локације. Без обзира да ли прилагодите величину слика или користите процентуалне ширине да бисте направили заиста флуидну мрежу чије величине су међусобно релативни, разумевање ових прорачуна биће неопходно да бисте постигли изглед жеља.