Lær om media queries, mobile-first, responsive bilder og viewport-enheter.
Fra 375 til 2500 piksler
Folk bruker nettsider på alt fra små mobiler på 375 piksler til store monitorer på over 2500. En side som ser flott ut på storskjerm kan være ubrukelig på mobil hvis den ikke er tilpasset. Responsivt design handler om nettsider som automatisk tilpasser seg skjermen de vises på, slik at brukeren alltid får en god opplevelse. Begrepet ble lansert av Ethan Marcotte i 2010, og i dag forventer alle – brukere, arbeidsgivere og Google – at sider fungerer på alle enheter. Google bruker faktisk mobilversjonen som grunnlag for søkerangering.
Det aller første steget er viewport-meta-taggen i <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Denne taggen forteller mobilnettlesere at de skal bruke enhetens faktiske bredde, i stedet for å late som om skjermen er 980 piksler bred. Uten den viser mobilen hele desktop-layouten nedskalert, slik at teksten blir for liten og knappene for små. width=device-width setter viewport-bredden lik enhetens bredde, og initial-scale=1.0 hindrer zoom ved lasting. Denne taggen skal alltid være med – uten den fungerer ikke resten av det responsive designet.
Media queries og mobile-first
Det viktigste verktøyet er media queries – CSS-regler som bare gjelder under visse betingelser. Du skriver @media etterfulgt av en betingelse i parentes, og alle reglene innenfor gjelder når betingelsen er oppfylt. Vanligst er skjermbredde: @media (min-width: 768px) betyr «når skjermen er minst 768 piksler bred». Du kan også bruke max-width for smale skjermer, og kombinere med and, komma (or) og not. Andre betingelser er orientation: landscape, prefers-color-scheme: dark (mørkt tema) og prefers-reduced-motion.
Hvordan reglene «stables» er viktig. Tenk deg en .boks som er rød, men blir blå ved min-width: 600px og grønn ved min-width: 1024px. På en 900-piksels skjerm er 600-regelen oppfylt, men ikke 1024-regelen, så boksen blir blå. Senere regler som er oppfylt, overstyrer tidligere.
Dette leder til mobile-first-prinsippet: start med å designe for den minste skjermen, og legg til stiler for større skjermer med min-width media queries. Det er motsatt av desktop-first, som bruker max-width. Mobile-first er bedre av flere grunner: mobile enheter laster bare grunnstilene (ytelse), du tvinges til å prioritere det viktigste innholdet, grunnopplevelsen fungerer overalt (progressiv forbedring), og Google indekserer mobile-first. Et breakpoint er punktet der layouten endres – vanlige verdier er 480px, 768px, 1024px og 1200px – men du bør velge dem ut fra når innholdet trenger ny layout, ikke ut fra spesifikke enheter, siden nye skjermstørrelser stadig dukker opp.
Bilder og enheter som strekker seg
Bilder er ofte den største ressursen på en side, og må også tilpasse seg. Den enkleste og viktigste regelen er:
img {
max-width: 100%;
height: auto;
}Dette hindrer at bildet blir bredere enn foreldreelementet, mens height: auto bevarer bildeforholdet. For mer kontroll bruker du srcset og sizes i HTML, som lar nettleseren velge den mest passende bildefilen ut fra skjermoppløsning og bredde. Og <picture>-elementet lar deg vise helt forskjellige bilder på ulike skjermer – for eksempel et bredt panorama på desktop og et beskåret portrett på mobil.
Til slutt har du viewport-enheter som skalerer med vinduet: vw er 1 % av bredden, vh er 1 % av høyden, og vmin/vmax bruker den minste eller største dimensjonen. Spesielt nyttig er funksjonen clamp() for responsiv typografi. Den tar tre verdier – minimum, foretrukket og maksimum. clamp(1.5rem, 4vw, 3.5rem) betyr at skriftstørrelsen følger 4vw, men aldri blir mindre enn 1.5rem eller større enn 3.5rem. Slik får du jevn skalering uten media queries. Et lite varsko: 100vh oppfører seg uforutsigbart på mobil fordi adresselinjen endrer den synlige høyden – den nyere enheten 100dvh (dynamic viewport height) løser dette. Og husk: test alltid designet i utviklerverktøyene med ulike skjermstørrelser.
Oppsummering
Responsivt design er en kjerneferdighet i moderne webutvikling. Alt starter med viewport-meta-taggen, som må være med for at mobile enheter skal vise siden riktig. Media queries med @media lar deg gi ulike stiler til ulike skjermbredder, og senere oppfylte regler overstyrer tidligere.
Mobile-first betyr å designe for den minste skjermen først og bygge på med min-width, mens breakpoints velges ut fra innholdet. Responsive bilder med max-width: 100% og viewport-enheter med clamp() gir fleksibel tilpasning uten unødvendig mange media queries. Test alltid på ulike skjermstørrelser – så fungerer den samme siden like godt på mobil, nettbrett og desktop.
Dette kapitlet er skrevet av Anthropics toppmodeller (Claude Opus og Claude Fable) og er foreløpig ikke manuelt gjennomgått — kvalitetskontrollen gjøres av uavhengige KI-agenter, og innmeldte feil rettes fortløpende. Funnet en feil? Meld fra, så retter vi den. Les mer om hvordan innholdet lages.