Сазнајте како веб прегледачи одређују приказ помоћу процентуалних вредности
Многи ученици одговорног веб дизајна имају тешко вријеме користећи проценте за вриједности ширине. Конкретно, постоји збуњеност како претраживач израчунава оне проценте. Испод ћете наћи детаљно објашњење како проценти раде за израчунавање ширине на одговарајућој веб локацији.
Коришћење пиксела за вриједности ширине
Када користите пикселе као ширину, резултати су врло јасни. Ако користите ЦСС да бисте поставили ширину вриједности елемента у заглављу документа на ширину 100 пиксела, тај елемент ће бити исти величине као онај који сте поставили на 100 пиксела широк у садржају или подножју веб странице или другим подручјима страна. Пиксели су апсолутна вриједност, тако да је 100 пиксела 100 пиксела, без обзира гдје се у вашем документу појављује елемент. Нажалост, док су вредности пиксела лако разумљиве, они не раде добро на одговарајућим веб страницама.
Етан Марцотте је сковао израз "одговарајући веб дизајн", објашњавајући овај приступ као садржину три кључна принципа:
- Флуидна мрежа
- Флуид медиа
- Медиа куериес
Те прве две тачке, флуидна мрежа и флуидни медији, постижу се коришћењем процената, умјесто пиксела, за величину вредности.
Коришћење процената за ширину вредности
Када користите проценте да бисте утврдили ширину елемента, стварна величина на којој се елемент приказује ће варирати у зависности од тога где се налази у документу. Проценат је релативна вредност, што значи да је приказана величина релативна у односу на друге елементе у вашем документу.
На пример, ако поставите ширину слике на 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%, они ће се другачије приказати сада, пошто је њихов садржај који је садржао, што је контекст којим се они мијењају, промијенио. Ове 3 дивизије сада ће се приказивати као по 480 пиксела широм, што је 30% од 1600, или величина контејнера (1600 к .30 = 480).
Узимајући ово још више, ако је постојала слика унутар једне од ових "кол" дивизија и та слика је била сразмерна процентом, контекст његовог димензионисања би био "кол" сам. Како се та "кол" дивизија промијенила у величини, тако да је слика унутар ње. Дакле, ако се промени величина претраживача или "контејнера", то би утицало на три "кол" дивизије, што би заузврат промијенило величину слике унутар "кола". Као што видите, сви су повезани када то долази до процењених вредности величине.
Када размислите о томе како ће елемент унутар веб странице приказати када се процењена вредност користи за његову ширину, морате разумјети контекст у којем се тај елемент налази у ознакама странице.
Укратко
Проценат игра кључну улогу у креирању изгледа за одговарајуће веб странице . Било да одговорите димензионисане слике или користите пропорционалне ширине да бисте направили истински флуидну мрежу чије су величине релативне једна до друге, разумевање ових прорачуна ће бити неопходно за постизање изгледа који желите.