Responsiva mått och bilder

Mål

Efter kapitlet ska du kunna...

• välja mellan vanliga CSS-enheter
• begränsa radlängd med max-width
• använda min(), max() och clamp()
• göra bilder flexibla utan att förvränga dem

Två slags mått

Fasta och relativa

px

Ett fast CSS-mått

.card { border-width: 2px; }

• px passar bra för tunna linjer och små detaljer.
• Ett värde i px räknas inte från förälderns storlek.

rem

Räknas från html-elementet

html { font-size: 16px; }
.card { padding: 2rem; }

• html är dokumentets rotelement.
• Webbläsarens standard är ofta 16px, men användarens inställningar kan ändra den.
• 2rem = 2 × 16px = 32px när roten är 16px.
• rem passar ofta för textstorlek och avstånd.

em

Beror på var em används

.parent { font-size: 20px; }
.button {
  font-size: 1em;
  padding: 1em;
}

• font-size: 1em räknas från den textstorlek som ärvs från föräldern: här 20px.
• padding: 1em räknas sedan från knappens egen beräknade textstorlek: här också 20px.

Procent

Beror på CSS-egenskapen

.parent { width: 600px; }
.child { width: 50%; }

• För width räknas procent från förälderns tillgängliga bredd.
• Procent räknas inte alltid från föräldern. Regeln beror på vilken CSS-egenskap som används.

Viewport

vw och vh

• 1vw är 1% av webbläsarfönstrets bredd.
• 1vh är 1% av webbläsarfönstrets höjd.
• De räknas inte från elementets förälder.

.hero { min-height: 60vh; }
h1 { font-size: 5vw; }

Jämför enheter

Vad räknas måttet från?

Läsbar radlängd

Begränsa textens bredd

main {
  max-width: 70ch;
  margin-inline: auto;
}

70ch motsvarar ungefär bredden av 70 nollor i den aktuella fonten.

Interaktiv radlängd

Ändra max-width

min()

Webbläsaren väljer det minsta värdet

1. Först beräknas 100% - 2rem.
2. Sedan jämförs resultatet med maxvärdet.
3. min() använder det mindre värdet.

max()

Välj det största värdet

.box {
  padding-inline: max(1rem, 4vw);
}

Avståndet blir aldrig mindre än 1rem, men kan växa med fönstret.

clamp()

Minsta, flexibelt, största

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

Interaktiv clamp

Ändra alla tre värden

Responsiva bilder

Bilden får krympa

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

• Bilden blir aldrig bredare än sin container.
• height: auto bevarar proportionerna.

Interaktiv bildbredd

Krymp bildens container

Containerns bredd: 32remimg { max-width: 100%; height: auto; }

Bilden behåller samma proportioner.

object-fit

Kräver en bestämd bildruta

.image-box {
  width: 100%;
  height: 12rem;
}
.image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Utan en bestämd bredd och höjd märks object-fit ofta inte.

Interaktiv object-fit

Jämför bildlägen

fill contain cover none scale-down

Rutans höjd: 12remobject-fit: fill;

Kontrollfråga

Vad gör height: auto på bilden?

Bevarar den bildens proportioner eller beskär den bilden?

Svar: proportionerna bevaras när bredden ändras.

Prova själv

Gör sidan mer följsam

1. Sätt en läsbar max-width på huvudinnehållet.
2. Byt stora fasta avstånd mot rem.
3. Gör en bild responsiv.
4. Testa clamp() på huvudrubriken.

Sammanfattning

Kom ihåg

• Relativa enheter räknas från olika utgångspunkter.
• max-width begränsar radlängd.
• clamp() ger ett flexibelt värde med två gränser.
• max-width: 100% och height: auto gör bilder följsamma.
• object-fit styr en bild inuti en bestämd ruta.