Udvikling
Byg et mobile-first responsivt layout
Én side der virker fra telefon til stor skærm
Mobile-first betyder, at du styler den mindste skærm først og lægger til, efterhånden som der bliver plads. Det giver enklere CSS og en side der virker overalt.
Sæt viewport-metatagget
Læg `<meta name="viewport" content="width=device-width, initial-scale=1">` i `<head>`. Uden det zoomer mobilbrowsere ud og viser en skrumpet desktop-side. Det er forudsætningen for at responsivt design overhovedet virker.
Glemt viewport-tag er den hyppigste grund til at «det ikke virker på mobil».
Style den lille skærm først
Skriv dine grundstile til mobil: enkeltkolonne, indhold i naturlig rækkefølge, læsbar tekststørrelse. Det er dine basisstile uden nogen media query — de gælder alle skærme, indtil du senere overskriver dem.
Brug relative enheder
Byg med `rem`, `%`, `fr` og `min()`/`max()`/`clamp()` frem for faste pixels, så layoutet flyder med skærmen. Reservér faste px til ting der reelt skal være faste, som en tynd kant.
1rem = brugerens grundskriftstørrelse — respektér den, det er også tilgængelighed.
Læg breakpoints til med min-width
Tilføj `@media (min-width: …)`-regler, der udvider layoutet, når der er plads — fx to eller tre kolonner på en tablet og desktop. Sæt breakpoints der hvor DESIGNET knækker, ikke efter bestemte enheders mål.
Gør billeder og medier fleksible
Sæt `img { max-width: 100%; height: auto; }`, så billeder aldrig sprænger deres spalte. Brug `srcset`/`sizes` til at levere en mindre fil til små skærme, så mobilbrugere ikke henter unødigt store billeder.
Test på rigtige bredder
Åbn DevTools' device-tilstand og træk viewporten fra smal til bred. Hold øje med vandret scroll, tekst der flyder ud, og elementer der overlapper. Ret ved at justere breakpoint eller enhed — helst også en tur på en rigtig telefon.
Vandret scrollbar på mobil = noget har en fast bredde der er for stor.
Source
Bygget på uddannelsens artikel «Responsivt design — én side, der virker på alle skærme» samt god faglig praksis i faget.