Procentandelar för breddberäkningar på en responsiv webbplats

Många elever med 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 väldigt enkla. Om du använder CSS för att ställa in breddvärdet för ett element i dokumentets sidhuvud till 100 pixlar brett, blir det elementet samma storlek som en som du ställer in till 100 pixlar i bredden i webbplatsens innehåll eller sidfot eller andra delar av sidan. Pixlar är ett absolut värde, så 100 pixlar är 100 pixlar oavsett var i ditt dokument ett element visas. Tyvärr, även om pixelvärdena är lätta att förstå, fungerar de inte bra på responsiva webbplatser.

Ethan Marcotte myntade termen ”Responsiv webbdesign”, förklarar detta tillvägagångssätt som innehåller tre viktiga principer:

  1. Ett flytande rutnät
  2. Flytande media
  3. Mediefrågor
instagram viewer

De första två punkterna, ett flytande rutnät och flytande media uppnås genom att använda procentsatser, i stället för pixlar, för att dimensionera värden.

Använda procent för breddvärden

När du använder procentsatser för att skapa en bredd för ett element varierar den faktiska storleken som elementet visar beroende på var det finns i dokumentet. Procentandelar är ett relativt värde, vilket innebär att storleken som visas är relativ till andra element i ditt dokument.

Till exempel om du ställer in bredden på ett bild till 50% betyder detta inte att bilden visas med hälften av sin normala storlek. Detta är en vanlig missuppfattning.

Om en bild faktiskt är 600 pixlar bred, betyder det inte att använda ett CSS-värde för att visa den med 50% att den kommer att vara 300 pixlar bred i webbläsaren. Detta procentvärde beräknas baserat på det element som innehåller bilden, inte själva bilden. Om behållaren (som kan vara en uppdelning eller något annat HTML-element) är 1000 pixlar bred, visas bilden med 500 pixlar eftersom värdet är 50% av behållarens bredd. Om det innehållande elementet är 400 pixlar brett visas bilden endast med 200 pixlar, eftersom värdet är 50% av behållaren. Bilden i fråga här har en 50% storlek som 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ärmstorlek / enhetsändringar. 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 varierar mängden förpackning du behöver beroende på lådans storlek. Detsamma gäller för procentuella bredder inom webbdesign.

Procentandelar baserade på andra procenttal

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å 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.

Anta 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 visas som tre vertikala kolumner.

Nu kan du använda CSS för att ställa in storleken på den "container" -delningen till att säga 90%. I det här exemplet har behållardivisionen inte något annat element som omger den, förutom kroppen, som vi inte har satt till något specifikt värde. Som standard kommer kroppen att återges som 100% av webbläsarfönstret. Därför kommer andelen "container" -delning att baseras på webbläsarens fönster. Eftersom webbläsarfönstret ändras i storlek kommer storleken på denna "container" också att göras. Så om webbläsarfönstret är 2000 pixlar brett, kommer denna uppdelning att visas med 1800 pixlar. Detta beräknas till 90 procent av 2000 (2000 x, 90 = 1800)), vilket är storleken på webbläsaren.

Om var och en av "kol" -delningarna 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 detta exempel. Detta beräknas som 30% av de 1800 pixlar som behållaren gör vid (1800 x, 30 = 540). Om vi ​​ändrade andelen av den behållaren skulle dessa inre divisioner också förändras i storleken de ger på eftersom de är beroende av det behållarelementet.

Låt oss anta att webbläsarfönstren förblir vid 2000 pixlar breda, men vi ändrar behållarens procentvärde till 80% istället för 90%. Det betyder att den kommer att återges med 1600 pixlar breda nu (2000 x, 80 = 1600). Även om vi inte ändrar CSS för storleken på våra tre "kol" -avdelningar och lämnar dem på 30%, kommer de renderas annorlunda nu eftersom deras innehållande element, vilket är det sammanhang som de är dimensionerade efter, har ändrats. De tre divisionerna återges nu som 480 pixlar breda vardera, vilket är 30% av 1600, eller storleken på behållaren 1600 x, 30 = 480).

Om vi ​​tar detta ännu längre, om det fanns en bild inuti någon av dessa "kol" -delningar och den bilden storleksanpassades med en procentsats, skulle sammanhanget för dess storlek vara "kol" själv. När den "kol" -delningen förändrades i storlek, skulle också bilden i den förändras. Så om webbläsarens storlek eller "behållaren" ändrades, skulle det påverka de tre "kol" -avdelningarna, vilket i sin tur skulle ändra storleken på bilden inuti "kol." Som du kan se är dessa alla anslutna när det gäller procentdriven storlek värden.

När du överväger hur ett element inuti en webbsida kommer att återges 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

Procentandelar spelar en avgörande roll för att skapa layouten för responsiva webbplatser. Oavsett om du ändrar storlek på bilder responsivt eller använder procentuella bredder för att skapa ett riktigt flytande rutnät vars storlekar är relativt varandra, är det nödvändigt att förstå dessa beräkningar för att uppnå det du ser ut önskan.