Kap 4.3 - Responsiva mått och bilder

Mål

• Välja mellan px, em, rem, %, vh och vw.
• Använda max-width för läsbarhet.
• Göra bilder flexibla utan att förvränga dem.
• Känna till min(), max() och clamp().

Fasta och relativa mått

px är exakt och passar för tunna linjer eller små detaljer. För text, avstånd och layout är relativa mått ofta bättre.

• rem utgår från rotens textstorlek och är bra för avstånd och fontstorlek.
• em utgår från elementets egen textstorlek.
• % utgår från förälderns storlek.
• vh och vw utgår från viewportens höjd och bredd.

Interaktivt exempel: fasta och relativa mått

Ändra värdena och jämför vad samma typ av mått räknas från. px är fast, medan rem, em, %, vw och vh ändras när deras utgångspunkt ändras.

.box {
    width: 120px;
}

Läsbar radlängd

main {
    width: min(100% - 2rem, 70ch);
    margin-inline: auto;
}

Regeln gör att innehållet nästan fyller små skärmar men inte blir för brett på stora skärmar. ch hjälper när du vill tänka i ungefärlig teckenbredd.

clamp

h1 {
    font-size: clamp(2rem, 5vw, 4rem);
}

clamp() sätter ett minsta värde, ett flexibelt värde och ett största värde. Det gör rubriker följsamma utan att bli orimligt små eller stora.

Interaktivt exempel: clamp och radlängd

Ändra bredden på ytan, rubrikens clamp()-värden och textens maxbredd. Lägg märke till hur rubriken kan vara följsam samtidigt som brödtexten hålls läsbar.

h1 {
    font-size: clamp(2rem, 5vw, 4rem);
}

Responsiva bilder

img {
    max-width: 100%;
    height: auto;
}

Den här regeln gör att bilder kan krympa med sin container. Om en bild ska fylla en fast ruta kan object-fit: cover användas, men kontrollera att viktig information inte beskärs.

object-fit används när bilden har en bestämd ruta, till exempel width: 100% och height: 12rem. Standardvärdet är fill. Det betyder att bilden fyller hela rutan, men den kan bli utdragen om rutans proportioner inte passar bilden. Utan en fast höjd märks object-fit ofta inte, eftersom bilden bara visas i sin vanliga proportion.

• fill: bilden fyller rutan och kan förvrängas. Detta är standardvärdet.
• contain: hela bilden syns, men det kan bli tom yta i rutan.
• cover: rutan fylls helt, men delar av bilden kan beskäras.
• none: bilden behåller sin egen storlek och kan beskäras om rutan är mindre.
• scale-down: webbläsaren väljer det som blir minst av none och contain.

Interaktivt exempel: responsiva bilder

Ändra bildens containerbredd med reglaget eller dra i nedre högra hörnet. Välj sedan olika object-fit-värden och jämför vad som händer.

Bildläge

fill (standard) contain cover none scale-down

Med max-width: 100% krymper bilden med sin container och behåller proportionerna.

img {
    max-width: 100%;
    height: auto;
}

Prova själv

1. Sätt max-width på sidans huvudinnehåll.
2. Byt fasta marginaler i px mot rem.
3. Gör en bild responsiv med max-width: 100%.
4. Testa clamp() på en huvudrubrik.