Många elever av lyhörd webbdesign har svårt att använda procentandelar för breddvärden. Specifikt är det förvirring med hur webbläsaren beräknar dessa procentsatser. Nedan hittar du en detaljerad förklaring av hur procentsatser fungerar för breddberäkningar på en mottaglig webbplats.
Använda pixlar för breddvärden
När du använder pixlar som ett breddvärde är resultaten mycket enkla. Om du använder CSS för att ange breddvärdet för ett element i huvudet på ett dokument till 100 pixlar bred, kommer det här elementet att vara samma storlek som en som du ställer in till 100 pixlar bred i webbplatsens innehåll eller sidfot eller andra delar av sida. Pixlar är ett absolut värde, så 100 pixlar är 100 pixlar oavsett var i ditt dokument ett element visas. Tyvärr, medan pixelvärden är lätta att förstå, fungerar de inte bra med lyhörda webbplatser.
Ethan Marcotte utgjorde termen "responsiv webbdesign", som förklarar detta tillvägagångssätt som innehåller tre nyckelprinciper:
- Ett fluidnät
- Vätskemedium
- Media frågor
De första två punkterna, ett fluidnät och fluidmedia uppnås genom att använda procentandelar, istället för pixlar, för dimensioneringsvärden.
Använda procentandelar för breddvärden
När du använder procentandelar för att skapa en bredd för ett element, varierar den faktiska storleken som det här elementet visar, beroende på var det finns i dokumentet. Procentandelar är ett relativvärde, vilket betyder att storleken som visas är relativt andra element i ditt dokument.
Om du till exempel anger bredden på en bild till 50%, gör det inte betyder att bilden kommer att visas vid hälften av sin normala storlek. Detta är en vanlig missuppfattning.
Om en bild är nationellt 600 pixlar bred, betyder det att ett CSS-värde för att visa det vid 50% inte betyder att det kommer att vara 300 pixlar bred i webbläsaren. Detta procentvärde beräknas baserat på det element som innehåller den bilden, inte den ursprungliga storleken på själva bilden. Om behållaren (som kan vara en delning eller något annat HTML-element) är 1000 pixlar bred, så kommer bilden att visas på 500 pixlar eftersom det värdet är 50% av behållarens bredd. Om det innehållande elementet är 400 pixlar bredt, visas bilden endast vid 200 pixlar, eftersom det värdet är 50% av behållaren. Den aktuella bilden här har en storlek på 50% som helt beror på det element som innehåller det.
Kom ihåg att lyhörd design är flytande. Layouts och storlekar kommer att ändras när skärmstorleken / enheten ändras. Om du tänker på detta i fysiska, icke-webbsajter, är det som att ha en kartong som du fyller med förpackningsmaterial. Om du säger att lådan ska vara hälften fylld med det materialet, kommer den mängd förpackning du behöver variera beroende på lådans storlek. Detsamma gäller för procentuella bredder i webbdesign.
Procentandelar baserade på andra procentandelar
I bilden / behållarexemplet använde vi pixelvärden för det innehållande elementet för att visa hur den responsiva bilden skulle visas. I själva verket skulle det innehållande elementet också sättas i procent och bilden eller andra element i den behållaren skulle få sina värden baserat på en procentandel av en procentandel.
Här är ett annat exempel som visar detta i praktiken.
Säg att du har en webbplats där hela webbplatsen ingår i en division med en klass av "container" (en gemensam webbdesignpraxis). Inuti den delningen finns tre andra divisioner som du så småningom kommer att utforma för att visa som 3 vertikala kolumner. Den HTML kan se ut så här:
Nu kan du använda CSS för att ställa in storleken på den "container" -avdelningen för att säga 90%. I det här exemplet har behållaravdelningen inte något annat element som omger det annat än kroppen, som vi inte har satt till något specifikt värde. Som standard kommer kroppen att göra som 100% av webbläsarfönstret. Därför kommer "procentandelens andel" att baseras på storleken på webbläsarfönstret. Eftersom det här webbläsarfönstret ändras i storlek, så kommer storleken på den här "behållaren". Så om webbläsarfönstret är 2000 pixlar brett visas den här uppdelningen vid 1800 pixlar. Detta beräknas som 90 procent av 2000 (2000 x .90 = 1800)), vilket är storleken på webbläsaren. Om var och en av "col" -avdelningarna som finns i "behållaren" är inställd på en storlek på 30%, kommer var och en av dem att vara 540 pixlar breda i det här exemplet. Detta beräknas som 30% av de 1800 pixlar som behållaren gör vid (1800 x .30 = 540). Om vi ändrade procentandelen av den behållaren, skulle dessa inre divisioner också förändras i den storlek de gör på eftersom de är beroende av det som innehåller elementet. Låt oss anta att webbläsarfönstren förblir 2000 pixlar breda, men vi ändrar behållarens procentuella värde till 80% istället för 90%. Det betyder att den kommer att göra 1600 pixlar bred nu (2000 x 80 = 1600). Även om vi inte ändrar CSS för storleken på våra 3 "col" -avdelningar och lämnar dem på 30%, kommer de att göra annorlunda nu eftersom deras innehållande element, vilket är det sammanhang som de är dimensionerade av, har förändrats. Dessa 3 divisioner kommer nu att göra som 480 pixlar breda, vilket är 30% av 1600, eller behållarens storlek (1600 x .30 = 480). Om detta skulle ske ytterligare, om det fanns en bild i en av dessa "kol" -avdelningar och den bilden var stor med en procentandel, skulle kontexten för dess dimensionering vara "col" själv.Eftersom den "col" divisionen förändrats i storlek, så skulle bilden inne i den. Så om storleken på webbläsaren eller "behållaren" ändras, skulle det påverka de tre "col" -avdelningarna, vilket i sin tur skulle ändra bildens storlek inuti "col". Som du kan se är dessa alla ansluten när det gäller procentuella dimensioneringsvärden. När du överväger hur ett element inuti en webbsida kommer att återge när ett procentvärde används för dess bredd, måste du förstå det sammanhang där det här elementet finns i sidans markering. Procentandelar spelar en viktig roll för att skapa layout för mottagliga webbplatser. Oavsett om du formaterar bilder på ett korrekt sätt eller använder procentuella bredder för att skapa ett verkligt fluidnät vars storlekar är i förhållande till varandra, är det nödvändigt att förstå dessa beräkningar för att uppnå det utseende du önskar. Sammanfattningsvis
