Mange studenter med responsiv webdesign har en vanskelig tid ved å bruke prosentandeler for breddeverdier. Spesielt er det forvirring med hvordan nettleseren beregner de prosentene. Nedenfor finner du en detaljert forklaring på hvordan prosentsatser fungerer for breddeberegninger i et responsivt nettsted.
Bruke piksler for breddeverdier
Når du bruker piksler som en breddeverdi, er resultatene veldig enkle. Hvis du bruker CSS til å angi breddeverdien for et element i overskriften til et dokument til 100 piksler bredt, vil elementet være i samme størrelse som en som du angir til 100 piksler bredt i nettstedets innhold eller bunntekst eller andre områder av side. Piksler er en absolutt verdi, så 100 piksler er 100 piksler, uansett hvor i dokumentet dukker opp et element. Dessverre, mens pikselverdier er enkle å forstå, fungerer de ikke bra med lydhør nettsteder.
Ethan Marcotte oppfattet begrepet "responsivt webdesign", og forklarer denne tilnærmingen som inneholder 3 sentrale prinsipper:
- Et væskenett
- Væske medier
- Media spørringer
De første to punktene, et fluidnett og fluidmedier oppnås ved å bruke prosentandeler, i stedet for piksler, for størrelsesverdier.
Bruke prosenter for breddeverdier
Når du bruker prosentandeler for å opprette en bredde for et element, vil den faktiske størrelsen som elementet viser, variere avhengig av hvor det er i dokumentet. Prosentandelene er en relativ verdi, noe som betyr at størrelsen som vises, er i forhold til andre elementer i dokumentet.
Hvis du for eksempel angir bredden på et bilde til 50%, gjør dette ikke betyr at bildet vil vises ved halvparten av sin normale størrelse. Dette er en vanlig misforståelse.
Hvis et bilde er nativt 600 piksler bredt, betyr det ikke at det vil være 300 piksler bredt i nettleseren, hvis du bruker en CSS-verdi for å vise den ved 50%. Denne prosentverdien beregnes basert på elementet som inneholder det bildet, ikke den opprinnelige størrelsen på selve bildet. Hvis beholderen (som kan være en divisjon eller et annet HTML-element) er 1000 piksler bredt, vil bildet vises på 500 piksler, siden den verdien er 50% av beholderens bredde. Hvis det inneholdende elementet er 400 piksler bredt, vil bildet bare vises ved 200 piksler, siden den verdien er 50% av beholderen. Bildet i spørsmålet her har en 50% størrelse som helt avhenger av elementet som inneholder det.
Husk at lydhør design er flytende. Layouter og størrelser endres ettersom skjermstørrelsen / enheten endres. Hvis du tenker på dette i fysiske, ikke-webbetingelser, er det som å ha en pappkasse som du fyller med pakkemateriale. Hvis du sier at boksen skal være halvt fylt med det materialet, vil mengden pakking du trenger, variere avhengig av boksens størrelse. Det samme gjelder for prosentvise bredder i webdesign.
Prosentandeler basert på andre prosenter
I eksemplet bilde / container brukte vi pikselverdier for det inneholdende elementet for å vise hvordan det responsive bildet skulle vises. I virkeligheten vil det inneholdende elementet også settes som en prosentandel, og bildet, eller andre elementer, inne i den beholderen, vil få sine verdier basert på en prosentandel av en prosentandel.
Her er et annet eksempel som viser dette i praksis.
Si at du har et nettsted der hele nettstedet er inneholdt i en divisjon med en klasse av "container" (en felles webdesign praksis). Innenfor divisjonen er tre andre divisjoner som du til slutt vil style for å vise som 3 vertikale kolonner. Den HTML kan se slik ut:
Nå kan du bruke CSS til å angi størrelsen på den "container" divisjonen for å si 90%. I dette eksemplet har containerdivisjonen ikke et annet element som omgir det annet enn kroppen, som vi ikke har satt til en bestemt verdi. Som standard vil kroppen gjøre som 100% av nettleservinduet. Derfor vil "container" divisjonens prosentandel være basert på størrelsen på nettleservinduet. Ettersom nettleservinduet endres i størrelse, vil størrelsen på denne "containeren" også bli større. Så hvis nettleservinduet er 2000 piksler bredt, vil denne delen vises ved 1800 piksler. Dette beregnes som 90 prosent av 2000 (2000 x .90 = 1800)), som er størrelsen på nettleseren. Hvis hver av de "col" -divisjonene som er funnet i "beholderen" er satt til en størrelse på 30%, vil hver av dem være 540 piksler bred i dette eksemplet. Dette beregnes som 30% av 1800 piksler som beholderen gjør ved (1800 x .30 = 540). Hvis vi endret prosentandelen av den beholderen, ville disse indre divisjonene også endre seg i størrelsen de gjør på siden de er avhengige av det som inneholder elementet. La oss anta at nettleservinduene forblir på 2000 piksler bredt, men vi endrer prosentverdien av beholderen til 80% i stedet for 90%. Det betyr at den vil gjengi 1600 piksler bred nå (2000 x .80 = 1600). Selv om vi ikke endrer CSS for størrelsen på våre 3 "col" divisjoner, og la dem være på 30%, vil de gjengi annerledes nå siden deres inneholdende element, som er konteksten de er dimensjonert av, har endret seg. Disse 3 divisjonene vil nå gi 480 piksler bred, som er 30% av 1600, eller størrelsen på beholderen (1600 x .30 = 480). Tar dette enda lenger, hvis det var et bilde i en av disse "kol" -delingene, og at bildet var dimensjonert med en prosentandel, ville konteksten for størrelsen være "col" selv.Som den "kol" -afdelingen endret i størrelse, så ville bildet i det. Så hvis størrelsen på nettleseren eller "containeren" endret, ville det påvirke de tre "kol" -delene, noe som i sin tur ville endre størrelsen på bildet i "kol". Som du kan se, er dette alle koblet når det kommer til prosentvis drevne størrelsesverdier. Når du vurderer hvordan et element på innsiden av en nettside skal gjengis når en prosentverdi brukes for bredden, må du forstå konteksten der elementet ligger i sidens oppslag. Prosentandelene spiller en viktig rolle når det gjelder å lage oppsett for lydhør nettsteder. Enten du dimensjonerer bilder på en responsiv måte eller bruker prosentvise bredder for å lage et virkelig fluidnett som har størrelser i forhold til hverandre, vil forstå disse beregningene være nødvendige for å oppnå det utseendet du ønsker. Oppsummert
