Spring til indhold
Academi.dk

Web og HTTP

Responsivt design

Let øvet DA↔EN-ordliste

Responsivt design betyder, at den samme side fungerer på både telefon og skærm. Det opnås med fleksible bredder i stedet for faste pixels, et viewport-tag i head, og media queries, der ændrer layoutet ved bestemte skærmbredder.

Forudsætter, at du har set css og selektorer .

Én side, mange skærme

Man byggede engang en side til computeren og en anden til mobilen. I dag bygger man én side, der tilpasser sig. Tre ting skal på plads, og de skal på plads i den rækkefølge.

1. Viewport-tagget

Uden den her linje i head gør telefonen noget mærkeligt: den lader som om skærmen er 980 pixels bred og zoomer hele siden ud, så teksten bliver ulæselig.

<meta name="viewport" content="width=device-width, initial-scale=1" />

Det er den enkelt hyppigste grund til, at en side “ikke virker på mobil”. Tjek den først.

2. Undgå faste bredder

En kasse på width: 600px er 600 pixels bred, også på en skærm, der er 375 pixels. Så skal brugeren scrolle sidelæns, og det er en dårlig oplevelse.

.indhold {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

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

Mønsteret width: 100% plus max-width betyder: fyld pladsen ud, men bliv aldrig bredere end 600 pixels. margin: 0 auto centrerer.

De to linjer om billeder er værd at have i ethvert stylesheet. Et billede, der er bredere end skærmen, er en anden almindelig årsag til sidelæns scroll.

3. Media queries

En media query er en blok CSS, der kun gælder under bestemte forhold, typisk en skærmbredde.

.raekke {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 700px) {
  .raekke {
    flex-direction: row;
  }
}

Bemærk rækkefølgen: standarden er den smalle udgave, og media queryen tilføjer noget, når der er mere plads. Det hedder mobile first, og grunden er praktisk - det er lettere at tilføje plads end at trække den fra igen.

Brudpunkter vælges efter, hvor dit layout begynder at se forkert ud, ikke efter bestemte telefonmodeller. Træk browservinduet langsomt smallere og se, hvor det knækker. Der sætter du et brudpunkt.

Test uden en telefon

Højreklik på siden, vælg Undersøg, og slå enhedsvisningen til. Så kan du vælge en skærmstørrelse og se siden som på en telefon. Det er ikke helt det samme som en rigtig enhed, men det fanger 90 procent af problemerne.

En hurtig tjekliste, inden du afleverer:

  • Er der sidelæns scroll ved 375 pixels bredde?
  • Kan man ramme knapperne med en tommelfinger?
  • Er teksten læsbar uden at zoome?
  • Ligger noget oven i hinanden?

Kort opsamling

  • Viewport-tagget først. Uden det virker resten ikke.
  • Procent og max-width frem for faste bredder.
  • Media queries, der tilføjer ved større skærme.
  • Test ved at gøre vinduet smallere, ikke ved at håbe.

Læs videre

Senest gennemgået .