Mnogi studenti responzivnog web dizajna imaju poteškoće koristeći postotke za vrijednosti širine. Konkretno, postoji zabuna s načinom na koji preglednik izračunava te postotke. Ispod ćete pronaći detaljno objašnjenje kako postoci rade za izračun širine na responzivnom web mjestu.
Korištenje piksela za vrijednosti širine
Kad koristite piksela kao vrijednost širine, rezultati su vrlo jasni. Ako koristite CSS za postavljanje vrijednosti širine elementa u zaglavlju dokumenta na 100 piksela širine, taj će element biti iste veličine kao ona koju ste postavili na 100 piksela širine u sadržaju ili podnožju web stranice ili u drugim područjima stranice. Pikseli su apsolutna vrijednost, tako da je 100 piksela 100 piksela bez obzira gdje se u vašem dokumentu element pojavio. Nažalost, iako su vrijednosti piksela lako razumljive, one ne funkcioniraju dobro s responzivnim web mjestima.
Ethan Marcotte je skovao taj izraz "Responzivni web dizajn", objašnjavajući da ovaj pristup sadrži 3 ključna principa:
- Tekuća rešetka
- Tekući mediji
- Upiti za medije
Te prve dvije točke, fluidna mreža i fluidni medij postižu se upotrebom postotaka, umjesto piksela, za određivanje veličina.
Korištenje postotaka za vrijednosti širine
Kada koristite postotke za utvrđivanje širine elementa, stvarna veličina koju element prikazuje ovisit će o tome gdje se nalazi u dokumentu. Postoci su relativna vrijednost, što znači da je prikazana veličina u odnosu na ostale elemente u vašem dokumentu.
Na primjer, ako postavite širinu datoteke slika do 50%, to ne znači da će se slika prikazivati na polovici svoje normalne veličine. Ovo je česta zabluda.
Ako je slika zapravo široka 600 piksela, upotreba CSS vrijednosti za prikaz na 50% ne znači da će u web pregledniku biti široka 300 piksela. Ta se postotna vrijednost izračunava na temelju elementa koji sadrži tu sliku, a ne stvarne veličine same slike. Ako je spremnik (koji može biti odjeljak ili neki drugi HTML element) širok 1000 piksela, tada će se slika prikazati na 500 piksela, jer je ta vrijednost 50% širine spremnika. Ako je element koji sadrži element širok 400 piksela, tada će se slika prikazati samo s 200 piksela, jer je ta vrijednost 50% spremnika. Dotična slika ovdje ima 50% veličine koja u potpunosti ovisi o elementu koji je sadrži.
Zapamtite, responzivni dizajn je fluidan. Izgledi i veličine mijenjat će se kako se promjena veličine zaslona / uređaja. Ako o tome razmišljate u fizičkom, ne-mrežnom smislu, to je kao da imate kartonsku kutiju koju punite materijalom za pakiranje. Ako kažete da bi kutija trebala biti napola napunjena tim materijalom, potrebna vam je količina pakiranja ovisno o veličini kutije. Isto vrijedi i za postotne širine u web dizajnu.
Procenti na temelju ostalih postotaka
U primjeru slike / spremnika koristili smo vrijednosti piksela za element koji sadrži kako bismo pokazali kako će se prilagodljiva slika prikazati. U stvarnosti, element koji sadrži sadrži također postavljen kao postotak, a slika ili drugi elementi unutar tog spremnika dobivaju svoje vrijednosti na temelju postotka postotka.
Evo još jednog primjera.
Recimo da imate web mjesto na kojem je cijelo mjesto smješteno unutar odjeljenja s klasom "spremnik" (uobičajena praksa web dizajna). Unutar tog odjeljenja nalaze se još tri odjeljenja koja ćete na kraju stilizirati za prikaz u obliku 3 vertikalna stupca.
Sada možete koristiti CSS da biste postavili veličinu tog odjeljka "spremnika" na 90%. U ovom primjeru odjeljak spremnika nema drugi element koji ga okružuje osim tijela, što nismo postavili ni na jednu određenu vrijednost. Prema zadanim postavkama tijelo će se prikazati kao 100% prozora preglednika. Stoga će se postotak podjele "spremnika" temeljiti na veličini prozora preglednika. Kako se veličina prozora preglednika mijenja, tako će se mijenjati i veličina ovog "spremnika". Dakle, ako je prozor preglednika širok 2000 piksela, ova će se podjela prikazati na 1800 piksela. To se izračunava kao 90 posto od 2000 (2000 x, 90 = 1800)), što je veličina preglednika.
Ako je svaki od odjeljaka "col" koji se nalazi unutar "spremnika" postavljen na veličinu od 30%, tada će svaki od njih u ovom primjeru biti širok 540 piksela. To se izračunava kao 30% od 1800 piksela na kojima spremnik prikazuje (1800 x .30 = 540). Ako bismo promijenili postotak tog spremnika, ove unutarnje podjele promijenile bi se i u veličini koju prikazuju jer ovise o tom elementu spremnika.
Pretpostavimo da prozori preglednika ostaju široki 2000 piksela, ali mijenjamo postotnu vrijednost spremnika na 80% umjesto na 90%. To znači da će se sada prikazivati na 1600 piksela širine (2000 x, 80 = 1600). Čak i ako ne promijenimo CSS za veličinu naša 3 "col" odjela i ostavimo ih na 30%, oni će sada se drugačije prikazuju jer njihov element koji sadrži, a to je kontekst po kojem su veličine, ima promijenio. Ta će se tri odjeljenja sada prikazivati kao širina od 480 piksela, što je 30% od 1600, odnosno veličina spremnika 1600 x .30 = 480).
Uzme li se to još dalje, ako se unutar jednog od ovih odjeljaka "col" nalazi slika i ta je slika određena u postocima, kontekst za njezino određivanje veličine bio bi sam "col". Kako se ta "col" podjela mijenjala u veličini, mijenjala bi se i slika unutar nje. Dakle, ako se promijeni veličina preglednika ili "spremnika", to bi utjecalo na tri odjeljka "col", što bi, pak, promijenite veličinu slike unutar "col." Kao što vidite, svi su povezani kada je u pitanju određivanje veličine prema postotku vrijednosti.
Kad uzmete u obzir kako će se element unutar web stranice prikazati kada se za njegovu širinu koristi postotna vrijednost, morate razumjeti kontekst u kojem se taj element nalazi u oznakama stranice.
U sažetku
Procenti igraju ključnu ulogu u stvaranju izgleda za responzivne web stranice. Bilo da prilagodite veličinu slika ili koristite postotne širine za izradu uistinu fluidne mreže čije veličine su međusobno međusobni, razumijevanje ovih izračuna bit će potrebno za postizanje vašeg izgleda želja.