Mange studenter med responsiv webdesign har vanskelig for å bruke prosenter for breddeverdier. Spesielt er det forvirring med hvordan nettleseren beregner prosentandelen. Nedenfor finner du en detaljert forklaring på hvordan prosenter fungerer for breddeberegninger på et responsivt nettsted.
Bruke piksler for breddeverdier
Når du bruker piksler som en breddeverdi er resultatene veldig greie. Hvis du bruker CSS for å sette breddeverdien til et element i overskriften til et dokument til 100 piksler bredt, vil elementet være samme størrelse som en du har satt til 100 piksler bredt i nettstedets innhold eller bunntekst eller andre områder av siden. Piksler er en absolutt verdi, så 100 piksler er 100 piksler uansett hvor i dokumentet et element vises. Dessverre, selv om pikselverdier er enkle å forstå, fungerer de ikke bra med responsive nettsteder.
Ethan Marcotte laget begrepet "Responsiv webdesign", og forklarer denne tilnærmingen som inneholder tre viktige rektorer:
- Et flytende rutenett
- Flytende medier
- Mediespørsmål
De to første punktene, et væskegitter og flytende medier oppnås ved å bruke prosenter, i stedet for piksler, for å dimensjonere verdiene.
Bruke prosenter for breddeverdier
Når du bruker prosenter for å etablere en bredde for et element, vil den faktiske størrelsen elementet viser variere avhengig av hvor det er i dokumentet. Prosentandeler er en relativ verdi, noe som betyr at størrelsen som vises er relativt til andre elementer i dokumentet.
For eksempel hvis du angir bredden på et bilde til 50%, betyr ikke dette at bildet vises på halvparten av sin normale størrelse. Dette er en vanlig misforståelse.
Hvis et bilde faktisk er 600 piksler bredt, betyr ikke bruk av en CSS-verdi for å vise det med 50% at det vil være 300 piksler bredt i nettleseren. Denne prosentverdien beregnes ut fra elementet som inneholder bildet, ikke den faktiske størrelsen på selve bildet. Hvis beholderen (som kan være en oppdeling eller et annet HTML-element) er 1000 piksler bredt, vil bildet vises med 500 piksler siden denne verdien er 50% av beholderens bredde. Hvis det inneholder elementet er 400 piksler bredt, vil bildet bare vises med 200 piksler, siden denne verdien er 50% av beholderen. Det aktuelle bildet har en størrelse på 50%, som helt avhenger av elementet som inneholder det.
Husk at responsiv design er flytende. Oppsett og størrelser endres som skjermstørrelse / endringer av enheten. Hvis du tenker på dette i fysiske, ikke-nett-termer, er det som å ha en pappeske du fyller med pakkemateriale. Hvis du sier at esken skal være halvfylt med det materialet, vil mengden pakking du trenger variere avhengig av størrelsen på esken. Det samme gjelder prosentvise bredder i webdesign.
Prosentandel basert på andre prosenter
I bildet / beholdereksemplet brukte vi pikselverdier for det inneholdende elementet for å vise hvordan det responsive bildet ville vises. I virkeligheten vil det inneholdende elementet også bli satt som en prosentandel, og bildet, eller andre elementer, inne i beholderen, vil få sine verdier basert på en prosentandel av en prosentandel.
Her er et annet eksempel.
Si at du har et nettsted der hele nettstedet er inneholdt i en divisjon med en klasse "container" (en vanlig praksis for nettdesign). Inne i den divisjonen er det tre andre divisjoner som du til slutt vil style for å vise som tre vertikale kolonner.
Nå kan du bruke CSS til å angi størrelsen på den "container" -delingen til å si 90%. I dette eksemplet har containerdivisjonen ikke et annet element som omgir det annet enn kroppen, som vi ikke har satt til noen spesifikk verdi. Som standard vil kroppen gjengis som 100% av nettleservinduet. Derfor vil prosentandelen "container" være basert på størrelsen på nettleservinduet. Når nettleservinduet endres i størrelse, vil størrelsen på denne "beholderen" også bli. Så hvis nettleservinduet er 2000 piksler bredt, vil denne inndelingen vises på 1800 piksler. Dette beregnes som 90 prosent av 2000 (2000 x, 90 = 1800)), som er størrelsen på nettleseren.
Hvis hver av "kol" -inndelingene som finnes i "beholderen" er satt til en størrelse på 30%, vil hver av dem være 540 piksler brede i dette eksemplet. Dette beregnes som 30% av 1800 piksler som beholderen gjengir til (1800 x, 30 = 540). Hvis vi endret prosentandelen av den beholderen, vil disse indre delene også endre seg i størrelsen de gjengir med siden de er avhengige av det beholderelementet.
La oss anta at nettleservinduene forblir på 2000 piksler brede, men vi endrer prosentverdien av beholderen til 80% i stedet for 90%. Det betyr at den gjengis med 1600 piksler bred nå (2000 x .80 = 1600). Selv om vi ikke endrer CSS for størrelsen på våre 3 "kol" -inndelinger, og lar dem stå på 30%, vil de gjengi annerledes nå siden deres inneholder element, som er konteksten de er dimensjonert etter, har endret. Disse tre divisjonene gjengis nå som 480 piksler bred hver, som er 30% av 1600, eller størrelsen på beholderen 1600 x 0,30 = 480).
Hvis vi tar dette enda lenger, hvis det var et bilde inne i en av disse "kol" -inndelingene og det bildet ble dimensjonert ved hjelp av en prosentandel, ville konteksten for dimensjonen være selve "kol". Etter hvert som den "kol" -delingen endret seg i størrelse, ville også bildet inne i den. Så hvis størrelsen på nettleseren eller "beholderen" endret seg, ville det påvirke de tre "kol" -inndelingene, som igjen ville endre størrelsen på bildet inne i "kol." Som du kan se, henger disse sammen når det gjelder prosentdrevet dimensjonering verdier.
Når du vurderer hvordan et element på en webside vil gjengis når en prosentverdi brukes for bredden, må du forstå konteksten der elementet ligger i sidens markering.
Oppsummert
Prosentandeler spiller en avgjørende rolle i å lage layout for responsive nettsteder. Enten du dimensjonerer størrelsen på bilder responsivt eller bruker prosentvise bredder for å lage et virkelig flytende rutenett hvis størrelser er relativt til hverandre, vil det være nødvendig å forstå disse beregningene for å oppnå utseendet du ser ut ønske.