Mange studerende med responsivt webdesign har svært ved at bruge procenter til breddeværdier. Specifikt er der forvirring med, hvordan browseren beregner disse procenter. Nedenfor finder du en detaljeret forklaring på, hvordan procenter fungerer til breddeberegninger på et responsivt websted.
Brug af pixels til breddeværdier
Når du bruger pixels som en breddeværdi er resultaterne meget ligetil. Hvis du bruger CSS for at indstille breddeværdien af et element i overskriften på et dokument til 100 pixels bredt, vil elementet være samme størrelse som en, som du indstiller til 100 pixels i bredden i webstedets indhold eller sidefod eller andre områder af siden. Pixels er en absolut værdi, så 100 pixels er 100 pixels, uanset hvor i dit dokument et element vises. Desværre, selv om pixelværdier er lette at forstå, fungerer de ikke godt med responsive websteder.
Ethan Marcotte opfandt udtrykket "Responsivt webdesign", der forklarer denne tilgang som indeholdende 3 nøgleprincipper:
- Et flydende gitter
- Flydende medier
- Medieforespørgsler
De første to punkter, et fluidgitter og flydende medier opnås ved at bruge procenter i stedet for pixels til størrelsesværdier.
Brug af procentdele for breddeværdier
Når du bruger procentdele til at etablere en bredde for et element, vil den faktiske størrelse, som elementet viser, variere 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.
For eksempel, hvis du indstiller bredden på et billede til 50% betyder dette ikke, at billedet vises med halvdelen af sin normale størrelse. Dette er en almindelig misforståelse.
Hvis et billede faktisk er 600 pixels bredt, betyder det ikke at bruge en CSS-værdi til at vise det med 50%, at det vil være 300 pixels bredt i webbrowseren. Denne procentværdi beregnes ud fra det element, der indeholder billedet, ikke den faktiske størrelse på selve billedet. Hvis beholderen (som kan være en division eller et andet HTML-element) er 1000 pixels bredt, vises billedet ved 500 pixels, da denne værdi er 50% af containerens bredde. Hvis det indeholdende element er 400 pixels bredt, vises billedet kun ved 200 pixels, da denne værdi er 50% af beholderen. Det pågældende billede her har en størrelse på 50%, som helt afhænger af det element, der indeholder det.
Husk, responsivt design er flydende. Layout og størrelser ændres som skærmstørrelse / enhedsændringer. Hvis du tænker på dette i fysiske, ikke-web termer, er det som at have en papkasse, som du fylder med emballagemateriale. Hvis du siger, at æsken skal være halvt fyldt med det materiale, vil mængden af emballage, du har brug for, variere afhængigt af æskens størrelse. Det samme gælder for procentvise bredder i webdesign.
Procentdele Baseret på andre procentdele
I billedet / beholdereksemplet brugte vi pixelværdier for det indeholdende element til at vise, hvordan det responsive billede ville blive vist. I virkeligheden ville det indeholdende element også blive indstillet som en procentdel, og billedet eller andre elementer inde i denne container ville få deres værdier baseret på en procentdel af en procentdel.
Her er et andet eksempel.
Sig, at du har et websted, hvor hele webstedet er indeholdt i en division med en klasse af "container" (en almindelig webdesignpraksis). Inde i denne division er der tre andre divisioner, som du til sidst vil style for at vise som 3 lodrette søjler.
Nu kan du bruge CSS til at indstille størrelsen på den "container" -afdeling til at sige 90%. I dette eksempel har containerafdelingen ikke et andet element, der omgiver det andet end kroppen, som vi ikke har indstillet til en bestemt værdi. Som standard gengives kroppen som 100% af browservinduet. Derfor er procentdelen af "container" -afdelingen baseret på størrelsen på browservinduet. Da browservinduet ændres i størrelse, vil størrelsen af denne "container" også blive. Så hvis browservinduet er 2000 pixels bredt, vises denne division med 1800 pixels. Dette beregnes som 90 procent af 2000 (2000 x, 90 = 1800)), hvilket er størrelsen på browseren.
Hvis hver af de "col" -inddelinger, der findes i "containeren", er indstillet til en størrelse på 30%, vil hver af dem være 540 pixels i dette eksempel. Dette beregnes som 30% af de 1800 pixels, som containeren gengiver (1800 x, 30 = 540). Hvis vi ændrede procentdelen af denne container, ville disse indre divisioner også ændre sig i størrelsen, de gengiver med, da de er afhængige af det containerelement.
Lad os antage, at browservinduerne forbliver på 2000 pixels brede, men vi ændrer den procentvise værdi af containeren til 80% i stedet for 90%. Det betyder, at den gengives med 1600 pixels bred nu (2000 x .80 = 1600). Selv hvis vi ikke ændrer CSS for størrelsen på vores 3 "col" -afdelinger og lader dem være på 30%, vil de gengives anderledes nu, da deres indeholdende element, som er den sammenhæng, de er dimensioneret efter, har ændret. Disse 3 divisioner gengives nu som 480 pixels bred hver, hvilket er 30% af 1600, eller størrelsen på containeren 1600 x .30 = 480).
Hvis vi tager dette endnu længere, hvis der var et billede inde i en af disse "col" -inddelinger, og det billede blev dimensioneret ved hjælp af en procentdel, ville konteksten for dets størrelse være selve "col". Efterhånden som denne "col" -deling ændrede sig i størrelse, ville billedet inde i den også. Så hvis størrelsen på browseren eller "containeren" blev ændret, ville det påvirke de tre "col" -afdelinger, som igen ville ændre størrelsen på billedet inde i "col." Som du kan se, er disse alle forbundet, når det kommer til procentdrevet størrelse værdier.
Når du overvejer, hvordan et element inde på en webside gengives, når en procentværdi bruges til dets bredde, skal du forstå den sammenhæng, hvor elementet ligger i sidens markering.
Sammenfattende
Procentdele spiller en kritisk rolle i oprettelsen af layoutet til responsive websteder. Uanset om du dimensionerer billeder responsivt eller bruger procentuelle bredder til at skabe et virkelig flydende gitter, hvis størrelser er relativt til hinanden, er det nødvendigt at forstå disse beregninger for at opnå det look, du ser ud ønske.