Många elever i responsiv webbdesign har svårt att använda procentsatser för breddvärden. Specifikt finns 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 responsiv 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 ställa in breddvärdet för ett element i sidhuvudet i ett dokument till 100 pixlar brett, kommer det elementet att ha samma storlek som ett som du ställer in till 100 pixlar brett i webbplatsens innehåll eller sidfot eller andra delar av sidan. Pixel ä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 ta upp förstår, de fungerar inte bra med responsiva webbplatser.
Ethan Marcotte myntade termen ”responsiv webbdesign”, och förklarar detta tillvägagångssätt som att det innehåller 3 nyckelprinciper:
- Flytande media
Ett vätskenät
Mediefrågor
De två första punkterna, ett flytande rutnät och flytande media uppnås genom att använda procent, istället för pixlar, för storleksstorleksvärden.
Använda procentsatser för breddvärden
När du använder procentsatser för att fastställa en bredd för ett element, kommer den faktiska storleken som elementet visar att variera beroende på var det är i dokumentet. Procentsatser är ett relativt värde, vilket betyder att storleken som visas är relativt till andra element i ditt dokument.
Om du till exempel ställer in bredden på en bild till 50 %, gör detta inte betyder att bilden kommer att visas i hälften av sin normala storlek. Detta är en vanlig missuppfattning.
Om en bild faktiskt är 600 pixlar bred, gör det att använda ett CSS-värde för att visa den med 50 % betyder inte att den blir 300 pixlar bred i webbläsaren. Detta procentvärde beräknas baserat på elementet som innehåller den bilden, inte den faktiska storleken på själva bilden. Om behållaren (som kan vara en division eller något annat HTML-element) är 1000 pixlar bred, kommer bilden att visas vid 500 pixlar eftersom det värdet är 50 % av behållarens bredd. Om det innehållande elementet är 400 pixlar brett, kommer bilden endast att visas vid 200 pixlar, eftersom det värdet är 50 % av behållaren. Bilden i fråga här har en storlek på 50% vilket helt beror på elementet som innehåller den. Kom ihåg att responsiv design är flytande. Layouter och storlekar kommer att ändras när skärmstorleken/enheten ändras. Om du tänker på detta i fysiska, icke-webb-termer, är det som att ha en kartong som du fyller med förpackningsmaterial. Om du säger att lådan ska vara halvfylld med det materialet kommer mängden packning du behöver variera beroende på lådans storlek. Detsamma gäller för procentuella bredder i webbdesign.
Procentsatser baserade på andra procentsatser
I exemplet med bild/behållare använde vi pixelvärden för att det innehållande elementet ska visa hur den responsiva bilden skulle visas. I verkligheten skulle det innehållande elementet också ställas in som en procentsats och bilden, eller andra element, inuti den behållaren, skulle få sina värden baserat på en procentandel av en procentsats.
Här är ett annat exempel.
Säg att du har en webbplats där hela webbplatsen finns i en division med en klass av ”container” (en vanlig webbdesignpraxis). Inuti den divisionen finns tre andra divisioner som du så småningom kommer att utforma för att visa som 3 vertikala kolumner.
Nu kan du använda CSS för att ställa in storleken på den ”behållaren” division för att säga 90%. I det här exemplet har behållardivisionen inget annat element som omger den förutom kroppen, som vi inte har satt till något specifikt värde. Som standard visas texten som 100 % av webbläsarfönstret. Därför kommer ”container”-avdelningens procentandel att baseras på storleken på webbläsarfönstret. Eftersom webbläsarfönstret ändras i storlek, kommer storleken på denna ”behållare” också att ändras. Så om webbläsarfönstret är 2000 pixlar brett, kommer denna uppdelning att visas vid 1800 pixlar. Detta beräknas som 90 procent av 2000 (2000 x 0,90 = 1800)), vilket är storleken på webbläsaren.
Om var och en av ”kol”-avdelningarna som finns i ”behållaren ” är inställd på en storlek på 30 %, då blir var och en av dem 540 pixlar breda i det här exemplet. Detta beräknas som 30 % av de 1800 pixlar som behållaren återger vid (1800 x 0,30 = 540). Om vi ändrade procentandelen av den behållaren, skulle dessa inre uppdelningar också ändras i storleken de återger till eftersom de är beroende av det behållarelementet.
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 renderas vid 1600 pixlar bred nu (2000 x 0,80 = 1600). Även om vi inte ändrar CSS för storleken på våra 3 ”col”-divisioner och lämnar dem på 30 %, kommer de att återge annorlunda nu eftersom deras innehållselement, vilket är sammanhanget som de är dimensionerade efter, har ändrats. Dessa tre uppdelningar kommer nu att återges som 480 pixlar breda vardera, vilket är 30 % av 1600, eller storleken på behållaren 1600 x 0,30 = 480).
Tar detta ännu längre, om det fanns en bild inuti en av dessa ”col”-indelningar och den bilden storleksanpassades med hjälp av en procentandel, skulle sammanhanget för dess storlek vara själva ”col”. När den ”col”-indelningen ändrades i storlek, skulle bilden inuti den också ändras. Så om storleken på webbläsaren eller ”behållaren” ändrades, skulle det påverka de tre ”col”-divisionerna, vilket i sin tur skulle ändra storleken på bilden inuti ”col.” Som du kan se hänger dessa alla ihop när det kommer till procentuella dimensioneringsvärden.
När du tänker på hur ett element inuti en webbsida renderas när ett procentvärde används för dess bredd, måste du förstå sammanhanget i vilket elementet finns i sidans markering.
Sammanfattningsvis
Procentsatser spelar en avgörande roll för att skapa layouten för responsiva webbplatser. Oavsett om du anpassar storleken på bilder eller använder procentbredder för att skapa ett riktigt flytande rutnät vars storlekar är relativt varandra, kommer det att vara nödvändigt att förstå dessa beräkningar för att uppnå det utseende du önskar.
