Mange elever af lydhurt webdesign har svært ved at bruge procentdele for breddeværdier. Specielt er der forvirring med, hvordan browseren beregner disse procentsatser. Nedenfor finder du en detaljeret forklaring af, hvordan procentsatser arbejder for breddeberegninger på et lydhurtigt websted.
Brug af pixler til breddeværdier
Når du bruger pixels som en breddeværdi, er resultaterne meget ligetil. Hvis du bruger CSS til at indstille breddeværdien af et element i hovedet af et dokument til 100 pixels bredt, vil elementet være den samme størrelse som en, som du angiver til 100 pixel bred i webstedets indhold eller sidefod eller andre områder af side. Pixler er en absolut værdi, så 100 pixel er 100 pixel, uanset hvor i dit dokument et element vises. Desværre, mens pixelværdier er lette at forstå, fungerer de ikke godt med lydhøre websites.
Ethan Marcotte udtænkte udtrykket "responsivt webdesign", der forklarede denne tilgang som indeholdt 3 nøgleprincipper:
- Et væskegitter
- Væske medier
- Medieforespørgsler
De første to punkter, et fluidgitter og fluidmedier opnås ved at anvende procentsatser, i stedet for pixels, til størrelsesværdier.
Brug af procentdel for breddeværdier
Når du bruger procentsatser til at oprette en bredde for et element, varierer den faktiske størrelse, som elementet viser til, afhængigt af, hvor det er i dokumentet. Procentdele er en relativ værdi, hvilket betyder, at den viste størrelse er i forhold til andre elementer i dit dokument.
Hvis du f.eks. Indstiller billedets bredde til 50%, gør det ikke betyder at billedet vil vise sig ved halvdelen af sin normale størrelse. Dette er en almindelig misforståelse.
Hvis et billede er indbygget 600 pixels bredt, betyder det, at ved at bruge en CSS-værdi for at vise det ved 50%, betyder det ikke, at det vil være 300 pixels bredt i webbrowseren. Denne procentværdi beregnes ud fra det element, der indeholder dette billede, ikke selve billedets oprindelige størrelse. Hvis beholderen (som kan være en division eller et andet HTML-element) er 1000 pixels bred, så vises billedet på 500 pixel, da den værdi er 50% af beholderens bredde. Hvis det indeholdende element er 400 pixel bredt, vises billedet kun ved 200 pixel, da den værdi er 50% af beholderen. Det her omhandlede billede har en 50% størrelse, der afhænger helt af det element, der indeholder det.
Husk, lydhør design er flydende. Layouter og størrelser ændres, efterhånden som skærmstørrelsen / enheden ændres. Hvis du tænker på dette i fysiske, ikke-webbetingelser, er det som at have en papkasse, som du udfylder med pakkemateriale. Hvis du siger, at kassen skal være halvt fyldt med det materiale, vil mængden af pakning du har brug for, variere afhængigt af boksens størrelse. Det samme gælder for procentvise bredder i webdesign.
Procentdele Baseret På Anden Andel
I billedet / containereksemplet anvendte vi pixelværdier for det indeholdende element for at vise, hvordan det responsive billede ville blive vist. I virkeligheden vil det indeholdende element også blive indstillet som en procentdel, og billedet eller andre elementer inde i den beholder ville få deres værdier baseret på en procentdel af en procentdel.
Her er et andet eksempel, der viser dette i praksis.
Sig, at du har en hjemmeside, hvor hele webstedet er indeholdt i en division med en klasse af "container" (en fælles webdesign praksis). Inde i den division er tre andre divisioner, som du i sidste ende vil style for at vise som 3 lodrette kolonner. Den HTML kan se sådan ud:
Nu kan du bruge CSS til at angive størrelsen af denne "container" division for at sige 90%. I dette eksempel har containerdivisionen ikke et andet element, der omgiver det andet end kroppen, som vi ikke har indstillet til nogen bestemt værdi. Som standard vil kroppen gøre som 100% af browservinduet. Derfor vil "container" divisionens procentdel være baseret på størrelsen af browservinduet. Da dette browservindue ændres i størrelse, så vil størrelsen af denne "container". Så hvis browservinduet er 2000 pixels bredt, vises denne division ved 1800 pixels. Dette beregnes som 90 procent af 2000 (2000 x .90 = 1800)), som er størrelsen af browseren.
Hvis hver af de "col" -afdelinger, der findes i "beholderen", er sat til en størrelse på 30%, vil hver af dem være 540 pixel brede i dette eksempel. Dette beregnes som 30% af de 1800 pixel, som beholderen gør ved (1800 x .30 = 540). Hvis vi ændrede procentdelen af den beholder, ville disse indvendige divisioner også ændre sig i den størrelse, de giver på, da de er afhængige af, at elementet indeholder.
Lad os antage, at browservinduet forbliver på 2000 pixels bredt, men vi ændrer beholderens procentværdi til 80% i stedet for 90%. Det betyder, at det vil gøre 1600 pixels bredt nu (2000 x .80 = 1600). Selvom vi ikke ændrer CSS for størrelsen af vores 3 "col" -afdelinger og efterlader dem med 30%, vil de gøre anderledes nu, da deres indholdsmæssige element, som er den sammenhæng, de er dimensioneret af, har ændret sig. Disse 3 divisioner vil nu gøre 480 pkt. Bred, hver 30% af 1600 eller beholderens størrelse (1600 x .30 = 480).
Hvis dette sker endnu mere, hvis der var et billede inde i en af disse "col" -afdelinger, og at billedet blev dimensioneret ved hjælp af en procentdel, ville konteksten for dets størrelsesorden være selve "col".Da den "col" division ændret sig i størrelse, så ville billedet inde i det. Så hvis størrelsen af browseren eller "containeren" ændres, ville det påvirke de tre "col" -afdelinger, hvilket igen ville ændre billedets størrelse inden for "col". Som du kan se, er disse alle forbundet, når det kommer til procentdrevne størrelsesværdier.
Når du overvejer, hvordan et element inde på en webside skal gengives, når en procentværdi anvendes til dens bredde, skal du forstå den sammenhæng, hvori elementet ligger i sidens markering.
I Sammenfatning
Procentdeler spiller en afgørende rolle for at skabe layoutet for lydhørige hjemmesider. Uanset om du dimensionerer billeder på en responsiv måde eller bruger procentvise bredder for at skabe et ægte fluidnettet, hvis størrelser er i forhold til hinanden, er det nødvendigt at forstå disse beregninger for at opnå det udseende, du ønsker.
