Saznajte kako web preglednici određuju prikaz pomoću postotnih vrijednosti
Mnogi učenici osjetljivog web dizajna teško se koriste postotkom vrijednosti širine. Konkretno, postoji konfuzija s načinom na koji preglednik izračunava te postotke. U nastavku ćete pronaći detaljno objašnjenje o tome kako postotci rade za izračun širine na responzivnoj web stranici.
Upotreba piksela za vrijednosti širine
Kada koristite piksele kao vrijednost širine, rezultati su vrlo jednostavni. Ako pomoću CSS postavite vrijednost širine elementa u zaglavlju dokumenta na širinu od 100 piksela, taj element bit će iste veličine kao što ste postavili na 100 piksela širok u sadržaju ili podnožju web mjesta ili na drugim područjima stranica. Pikseli su apsolutna vrijednost, pa je 100 piksela 100 piksela bez obzira gdje se u dokumentu pojavljuje element. Nažalost, iako su vrijednosti piksela lako razumljive, ne rade dobro na odzivnim web stranicama.
Ethan Marcotte je izradio termin "odgovarajući web dizajn", objašnjavajući taj pristup kao da sadrži 3 ključna načela:
- Tekućina rešetka
- Tekući mediji
- Upiti za medije
Te prve dvije točke, fluidna rešetka i tekući medij, postižu se korištenjem postotaka, umjesto piksela, za veličine vrijednosti.
Koristeći postotke za vrijednosti širine
Kada koristite postotke za utvrđivanje širine elementa, stvarna veličina koju taj element prikazuje u će se razlikovati ovisno o tome gdje se nalazi u dokumentu. Postotci su relativna vrijednost, što znači da je prikazana veličina u odnosu na druge elemente u vašem dokumentu.
Na primjer, ako postavite širinu slike na 50%, to ne znači da će se slika prikazivati na polovici svoje normalne veličine. Ovo je uobičajena zabluda.
Ako je slika nativno širine 600 piksela, tada pomoću CSS vrijednosti za prikaz na 50% ne znači da će u web pregledniku biti širok 300 piksela. Ta se postotna vrijednost izračunava na temelju elementa koji sadrži tu sliku, a ne same izvorne veličine slike. Ako je kontejner (koji bi mogao biti odjeljak ili neki drugi HTML element) širok 1000 piksela, slika će se prikazivati na 500 piksela jer je ta vrijednost 50% širine spremnika. Ako je element koji sadržava širok 400 piksela, slika će se prikazivati samo na 200 piksela jer je ta vrijednost 50% spremnika. Slika u pitanju ovdje ima veličinu od 50% koja potpuno ovisi o elementu koji ga sadrži.
Zapamtite, odgovarajući dizajn je tekuć. Izgledi i veličina će se promijeniti nakon promjene veličine zaslona / uređaja . Ako razmišljate o tome u fizičkim, ne-web uvjetima, to je kao da kartonska kutija koju popunjavate s materijalom za pakiranje. Ako kažete da je polica puna napunjen materijalom, količina pakiranja koja vam je potrebna mijenjat će se ovisno o veličini okvira. Isto vrijedi i za postotke širine u web dizajnu.
Postoci na temelju ostalih postotaka
U primjeru slike / spremnika upotrebljavala sam vrijednosti piksela za element koji je sadržavao kako bi pokazao kako će se prikazati responzivna slika. U stvarnosti element koji sadržava također bi bio postavljen na postotak, a slika ili drugi elementi unutar tog spremnika dobivaju svoje vrijednosti na temelju postotka postotka.
Evo još jednog primjera koji to pokazuje u praksi.
Recimo da imate web mjesto na kojem se cijela web-lokacija nalazi u odjeljku s klasi "kontejner" (zajednička praksa za web-dizajn). Unutar te podjele nalaze se još tri podjele koje ćete na kraju oblikovati kao 3 vertikalna stupca. Taj HTML može izgledati ovako:
Sada možete koristiti CSS da biste postavili veličinu te odjeljke "kontejner" da kažete 90%. U ovom primjeru, odjeljak kontejnera nema drugi element koji ga okružuje osim tijela, što nismo postavili na određenu vrijednost. Prema zadanim postavkama, tijelo će prikazati 100% prozora preglednika. Stoga se postotak odjeljka "kontejner" temelji na veličini prozora preglednika. Kako se prozor preglednika mijenja veličinom, tako će i veličina ovog "kontejnera". Dakle, ako je prozor preglednika širok 2000 piksela, ta se podjela prikazuje na 1800 piksela. To se računa kao 90 posto 2000 (2000 x .90 = 1800)), što je veličina preglednika.
Ako se svaka od odjeljaka "col" koje se nalaze unutar "spremnika" postavljena na veličinu od 30%, tada će svaki od njih biti širok 540 piksela u ovom primjeru. To se izračunava kao 30% od 1800 piksela koje spremnik prikazuje na (1800 x .30 = 540). Ako promijenimo postotak tog spremnika, te se unutarnje podjele također mijenjaju u veličini koju pružaju jer su ovisne o sadržaju tog elementa.
Pretpostavimo da prozori preglednika ostaju na 2000 piksela, ali promijenimo postotnu vrijednost kontejnera na 80% umjesto 90%. To znači da će se sada prikazati na 1600 piksela (2000 x .80 = 1600). Čak i ako ne promijenimo CSS za veličinu naših 3 "col" podjela i ostavimo ih na 30%, oni će sada drugačije prikazati jer se njihov element koji sadrži, što je kontekst kojim se veličaju, promijenio. Te tri odjeljke sada će prikazati 480x širok, što je 30% od 1600 ili veličina spremnika (1600 x .30 = 480).
Uzimajući to čak i dalje, ako je unutar jedne od tih "col" podjela imala slika i da je slika veličine pomoću postotka, kontekst za njegovu dimenziju bi bio sam "kol". Kako se ta podjela "col" promijenila u veličini, tako bi i slika unutar njega. Dakle, ako se promijenila veličina preglednika ili "spremnika", to bi utjecalo na tri "divljačka" podjela, što bi zauzvrat promijenilo veličinu slike unutar "col". Kao što možete vidjeti, sve su to povezane kada dolazi do vrijednosti određivanja veličine određene postotkom.
Kada uzmete u obzir kako će se element unutar web stranice prikazati kada se za svoju širinu upotrebljava postotna vrijednost, morate razumjeti kontekst u kojem se taj element nalazi u oznaci stranice.
U sažetku
Postotci igraju ključnu ulogu u izradi izgleda za responzivne web stranice . Bez obzira na veličinu slike na odgovarajući način ili za uporabu postotka širine kako biste napravili istinski fluidnu rešetku čija su veličina međusobno relativna, razumijevanje ovih izračuna bit će potrebno za postizanje željenog izgleda.