Ikasi web nabigatzaileek pantailaren bistaratzea zehazteko ehuneko balioak erabiliz
Web diseinatzaile sentikorreko ikasle askok zailtasun handiak izaten dituzte zabalera-balioetarako ehunekotan. Zehazki, nabigatzaileek portzentaje horiek nola kalkulatzen dituzten nahasten dira. Jarraian, portzentajeek zabalera-kalkuluen arabera funtzionatzen duten azalpen zehatza aurkituko duzu.
Zabalera balioetarako Pixelak erabiltzea
Pixelak zabalera-balio gisa erabiltzen dituzunean, emaitzak oso errazak dira. CSS erabiltzen baduzu dokumentuaren goiburuko elementu baten zabalera 100 pixeleko zabalera ezartzeko, elementu hori 100 pixeleko zabalera ezarriko da webguneko edukian edo orrialdetan edo beste eremu batzuetan. orria. Pixelak balio absolutu bat dira, beraz 100 pixel 100 pixel dira, non badago dokumentuan elementu bat agertzen den lekuan. Zoritxarrez, pixelen balioak erraz ulertzen diren bitartean, ez dira ondo funtzionatzen webgune sentikorretan.
Ethan Marcotte "diseinugile web sentikorra" terminoa asmatu zuen, ikuspegi hau azalduz 3 funtsezko nagusien artean:
- Sare fluido bat
- Jariakinen komunikabideak
- Media kontsultak
Lehenengo bi puntuak, sare fluidoa eta fluidoen komunikabideak, ehunekoak erabiliz, pixelen ordez, balioak kalkulatzeko balio dute.
Zabalera balioentzako ehunekoak erabiltzea
Elementu baten zabalera ezartzeko ehunekoak erabiltzen dituzunean, elementu horrek erakusten duen benetako tamaina aldatuko da dokumentuan dagoen lekuaren arabera. Ehunek balio erlatiboa dute, dokumentuan agertzen diren beste elementuei dagokienez.
Adibidez, irudi baten zabalera% 50eraino ezartzen baduzu , horrek ez du esan nahi irudirik tamaina arruntaren erdian dagoela. Hau ideia okerra da.
Irudi bat 600 pixel zabaleko natively bada, orduan CSS balioa 50% erakusteko balio du, ez du esan nahi 300 pixel zabaleko izango dela web arakatzailean. Ehuneko balio hori kalkulatzen da irudi hori duen elementuaren arabera, ez da bertako irudiaren jatorrizko tamaina. Edukiontzia (zatiketa bat edo beste elementu bat izan liteke) 1000 pixel zabal badaude, irudia 500 pixeleko bistaratuko da, balioa edukiontzien zabaleraren% 50 da. Edukiontzia 400 pixel zabal bada, orduan irudia 200 pixel bakarrik erakutsiko da, balio hori edukiontziaren% 50ekoa baita. Irudi honetan hemen% 50eko tamaina dauka, eta hori guztia osatzen duen elementuaren araberakoa da.
Gogoratu, sentikorra den diseinua arina da. Diseinuak eta tamainak aldatu egingo dira pantailaren tamaina / gailua aldatuz . Baldintza fisiko eta ez-konbentzionaletan pentsatzen baduzu, paketatze-materiala betetzen ari zaren kartoizko kutxa edukitzea bezalakoa da. Kaxa material horrekin erdi beteta dagoela esan nahi baduzu, beharrezkoa den paketatze kopurua laukiaren tamainaren arabera alda daiteke. Gauza bera gertatzen da ehuneko zabalera web diseinuan.
Ehuneko beste ehunekoetan oinarrituta
Irudi / edukiontziaren adibidean, pixkanaka-pixkanaka balioak erabiltzen ditut elementu honi erantzuteko irudia erakusteko. Errealitatean, elementu hori ehunekoa izango litzateke eta irudia edo beste elementu batzuk edukiontzi barruan edukiko lituzkete beren balioak ehuneko ehuneko batean oinarrituta.
Hona hemen praktikan hau erakusten duen beste adibide bat.
Esan webgune bat non gune osoa zatiketa baten barruan dagoen "edukiontzi" klase batekin (web diseinu praktiko komun bat). Zatiketa horren barruan beste hiru zatiketa daude, azkenean 3 zutabe bertikal moduan erakutsiko dira. HTML hau itxura hau izan daiteke:
Orain, CSS erabil dezakezu "edukiontzi" zatiketa horren tamaina ezartzeko 90% esateko. Adibide honetan, edukiontziak ez du beste gorputz bat inguratzen duen beste elementurik, eta ez dugu balio zehatzik ezarri. Lehenespenez, gorputzak arakatzailearen leihoaren% 100 bihurtuko du. Hori dela eta, "edukiontzi" zatiketa portzentajea arakatzailearen leihoaren tamaina izango da. Nabigatzailearen leihoan tamaina aldatzen denean, "edukiontzi" horren tamaina izango da. Beraz, arakatzailearen leihoa 2000 pixel zabalekoa bada, zatiketa 1800 pixeletan bistaratuko da. 2000.urtean (2000 x .90 = 1800) 90eko ehuneko gisa kalkulatzen da, hau da, nabigatzailearen tamaina.
"Edukiontzian" aurkitutako "col" zatietako bakoitza% 30 tamainara egokitzen bada, horietako bakoitzak 540 pixel zabal izango ditu adibide honetan. Honek 1800 x .30 = 540 atarian egiten dituen 1800 pixelen% 30a kalkulatzen du. Edukiontziaren portzentajea aldatu badugu, barneko zatiketa hauek ere aldatu egingo lirateke eredu horretan, elementu horren menpe daudenez.
Azpimarratu dugu arakatzailearen leihoek 2000 pixeleko zabalera izaten jarraitzen duela, baina edukiontziaren ehunekoaren balioa 80% aldatzen dugu,% 90 ordez. Horrek esan nahi du 1600 pixeleko zabalera izango dela orain (2000 x .80 = 1600). CSS 3 aldagaiak tamainaz aldatzen ez badituzu ere, eta% 30ean utzi, beste modu batera errendatuko dira, haien edukiontzia aldatu egin delako. 3 zatiketa horiek orain 480 pixeleko zabalera izango dira, hau da, 1600eko% 30ekoa edo edukiontziaren tamaina (1600 x .30 = 480).
Aurrerantzean, "kolekzio" horietako baten irudia bazen eta irudi hori portzentaje batez tamainakoa zen, bere kolorearen testuingurua "kol" bera izango litzateke. "Col" zatiketa tamainan aldatu zenez, horren barruan irudia litzateke. Beraz, nabigatzailearen edo "edukiontziaren" tamaina aldatzen bada, hiru "kolektibitate" zatiek eragingo lukete, eta horrek kolorea aldatuko luke "col" barruan. Ikusten duzun bezala, hauek guztiak konektaturik daude ehuneko gidariaren tamainako balioak dira.
Webgune baten barruan elementu bat nola hartzen den kontuan hartzen denean, ehunekoaren balioa zabalera erabiltzen denean, elementu horrek orriaren markan dauden egoerak ulertu behar dituzu.
Laburbilduz
Zentzuek funtsezko zeregina dute erantzuteko webguneetarako diseinua sortzeko. Irudiak modu koherentean edo ehuneko zabalera erabiliz dimentsionatzen dituzun ala ez adierazten du sareak benetan fluidoen sareta bat egiteko, zeinaren tamainak elkarrengandik erlatiboak baitira, kalkulu horiek ulertzeko behar duzun itxura lortzeko.