Saznajte kako web pregledači određuju prikaz pomoću procentualnih vrednosti
Mnogi učenici odgovornog web dizajna imaju teško vrijeme koristeći procente za vrijednosti širine. Konkretno, postoji zbunjenost kako pretraživač izračunava one procente. Ispod ćete pronaći detaljno objašnjenje kako procenti rade za izračunavanje širine na odgovarajućoj web lokaciji.
Korišćenje piksela za vrijednosti širine
Kada koristite piksele kao širinu, rezultati su vrlo jasni. Ako koristite CSS da biste postavili širinu vrijednosti elementa u zaglavlju dokumenta na širinu 100 piksela, taj element će biti isti veličine kao onaj koji ste postavili na 100 piksela širok u sadržaju ili podnožju web stranice ili drugim područjima stranica. Pikseli su apsolutna vrijednost, tako da je 100 piksela 100 piksela, bez obzira gdje se u vašem dokumentu pojavljuje element. Nažalost, dok su vrednosti piksela lako razumljive, one ne funkcionišu dobro na odgovarajućim web stranicama.
Etan Marcotte je skovao izraz "odgovarajući web dizajn", objašnjavajući ovaj pristup kao što sadrži 3 ključna principa:
- Tečna mreža
- Fluidni mediji
- Media queries
Te prve dve tačke, fluidna mreža i fluidni mediji se postižu korišćenjem procenata, umjesto piksela, za veličinu vrijednosti.
Korišćenje procenata za vrijednosti širine
Kada koristite procente da biste utvrdili širinu elementa, stvarna veličina na kojoj se element prikazuje će varirati u zavisnosti od toga gdje se nalazi u dokumentu. Procenat je relativna vrednost, što znači da je prikazana veličina relativna 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 prikazati na pola svoje normalne veličine. Ovo je česta zabluda.
Ako je slika prirodno širina 600 piksela, onda upotreba CSS vrijednosti za prikaz na 50% ne znači da će u web pretraživaču biti širina 300 piksela. Ova procentualna vrednost izračunava se na osnovu elementa koji sadrži tu sliku, a ne izvorne veličine same slike. Ako je kontejner (koji bi mogao biti podjela ili neki drugi HTML element) širok 1000 piksela, onda će se slika prikazati na 500 piksela, jer ta vrijednost iznosi 50% širine kontejnera. Ako je element koji sadrži sadržaj širine 400 piksela, slika će se prikazati samo na 200 piksela, jer ta vrednost iznosi 50% kontejnera. Slika u pitanju ovde ima veličinu od 50% koja u potpunosti zavisi od elementa koji ga sadrži.
Zapamtite, odgovarajući dizajn je fluidan. Postavke i veličine će se menjati kada se veličina ekrana / uređaja promeni . Ako razmislite o tome u fizičkim, ne-web terminima, to je kao imati kartonsku kutiju koju popunjavate materijalima za pakovanje. Ako kažete da kutija treba da bude pola ispunjena tom materijalom, količina ambalaže koja vam je potrebna zavisiće od veličine kutije. Isto vrijedi i za procentualne širine u web dizajnu.
Procenat zasnovan na drugim procentima
Na primeru slike / kontejnera, koristio sam vrednosti piksela za element koji sadrži i pokazao kako bi se prikazala slika koja odgovara. U stvarnosti, element koji sadrži sadrži i procenat, a slika ili drugi elementi unutar tog kontejnera bi dobili svoje vrijednosti na osnovu procenta procenta.
Evo još jednog primera koji to pokazuje u praksi.
Recite da imate web lokaciju na kojoj se čitava stranica nalazi u okviru odjeljenja sa klasi "kontejnera" (zajednička praksa web dizajna). Unutar ove podjele su tri druge podjele koje ćete na kraju stajati na prikazu kao 3 vertikalna stupca. Taj HTML može izgledati ovako:
Sada možete koristiti CSS da biste podesili veličinu te "kontejnerske" podele da biste rekli 90%. U ovom primeru, podela kontejnera nema drugi element koji ga okružuje osim tela, za koje nismo postavili nikakvu određenu vrijednost. Podrazumevano, tijelo će činiti kao 100% prozora pregledača. Zbog toga će procenat "kontejnera" biti zasnovan na veličini prozora pregledača. Kako se prozor pregledača mijenja u veličini, tako će se i veličina ovog "kontejnera". Dakle, ako je prozor pregledača širine 2000 piksela, ova podela će se prikazati na 1800 piksela. Ovo se računa kao 90% od 2000 (2000 x .90 = 1800)), što je veličina pretraživača.
Ako je svaka od "kol" podela u okviru "kontejnera" postavljena na veličinu od 30%, onda će svaki od njih biti širok 540 piksela u ovom primeru. Ovo se računa kao 30% od 1800 piksela koje kontejner čini na (1800 x .30 = 540). Ako smo promenili procenat tog kontejnera, i ove unutrašnje podele bi se takođe promenile u veličini koju prikazuju, pošto zavise od onog koji sadrži element.
Pretpostavimo da su prozori pregledača i dalje široki na 2000 piksela, ali promjenimo procentualnu vrijednost kontejnera na 80% umjesto 90%. To znači da će sada biti prikazan na 1600 piksela (2000 x .80 = 1600). Čak i ako ne promenimo CSS veličinu naših 3 "col" podela i ostavimo ih na 30%, oni će se ponoviti drugačije od trenutka kada je njihov sadržaj koji je sadržao, što je kontekst kojim se oni mijenjaju, promijenio. Ove 3 divizije sada će se prikazivati kao po 480 piksela širom, što je 30% od 1600, ili veličina kontejnera (1600 x .30 = 480).
Uzimajući ovo još više, ukoliko je postojala slika unutar jedne od ovih "kol" divizija i ta slika je bila srazmerna procentu, kontekst za njegovu veličinu bi bio "kol". Kako se ta "kol" divizija promijenila u veličini, tako da je slika unutar nje. Dakle, ako se promeni veličina pretraživača ili "kontejnera", to bi uticalo na tri "kol" divizije, što bi zauzvrat promijenilo veličinu slike unutar "col." Kao što vidite, sve su povezane kada to dolazi do procenjenih vrednosti veličine.
Kada razmislite o tome kako će element unutar veb stranice prikazati kada se procenjena vrednost koristi za njegovu širinu, morate razumjeti kontekst u kojem se taj element nalazi u oznakama stranice.
U rezimeu
Procenat ima ključnu ulogu u kreiranju izgleda za odgovarajuće web stranice . Bilo da odgovorite dimenzionisane slike ili koristite proporcionalne širine da biste napravili istinski fluidnu mrežu čije su veličine relativne jedna na drugu, razumevanje ovih proračuna će biti neophodno za postizanje izgleda koji želite.