Lær å lage nettsider som fungerer godt på alle skjermstørrelser, fra mobil til desktop, med responsive teknikker.
Én side, mange skjermer
Ta fram telefonen din og besøk en nettside du liker. Så åpne den samme siden på en stor dataskjerm. Legg merke til at den ser ulik ut -- kanskje menyen er sammenfoldet på mobilen, kanskje innholdet ligger i én kolonne på telefonen og tre kolonner på skjermen. Likevel er det den samme nettsiden. Hvordan er det mulig?
Svaret er responsivt webdesign. I dag kommer over halvparten av all nettrafikk fra mobiltelefoner, og en side som bare ser bra ut på en stor skjerm, vil frustrere de fleste besøkende. Responsivt design betyr at siden automatisk tilpasser seg skjermstørrelsen -- enten brukeren sitter med mobil, nettbrett eller storskjerm. Det er ikke lenger en luksus; det er en selvfølge.
I denne fortellingen skal vi lære teknikkene som gjør dette mulig. Vi skal forstå viewport-taggen som forteller mobilen hvordan den skal skalere, media queries som bytter layout ved bestemte bredder, mobile-first-tankegangen som snur designprosessen, og responsive bilder og enheter som strekker seg etter skjermen i stedet for å låse seg til faste piksler.
Den lille taggen som forteller mobilen sannheten
Før vi gjør noe som helst annet, må vi sørge for at mobilnettleseren forstår hva vi holder på med. Det gjør vi med en liten, men helt avgjørende kodelinje i <head> -- viewport-taggen: <meta name="viewport" content="width=device-width, initial-scale=1.0">.
Hvorfor er denne så viktig? Jo, uten den antar mobilnettleseren at siden din er laget for en stor dataskjerm, vanligvis rundt 980 piksler bred. Da gjør den noe ulogisk: den krymper hele skrivebordsversjonen ned til en bitteliten miniatyr som får plass på mobilskjermen. Resultatet er en side der teksten er så liten at du må zoome og dra deg rundt for å lese noe som helst -- en elendig opplevelse.
Med viewport-taggen forteller du derimot nettleseren: «bredden på siden skal matche enhetens faktiske skjermbredde». Da tilpasses innholdet til den ekte mobilskjermen, og alt det andre responsive arbeidet vi skal gjøre, kan faktisk virke. Denne ene linjen er fundamentet -- glemmer du den, faller alt annet sammen, uansett hvor smart CSS-en din er.
Når siden bytter ansikt
Nå til selve hjertet i responsivt design: media queries. Dette er en CSS-teknikk som lar deg bruke ulike stiler avhengig av egenskaper ved enheten -- som regel skjermbredden. Med media queries kan siden bokstavelig talt bytte ansikt når skjermen blir bredere eller smalere.
Slik fungerer det: du skriver @media (min-width: 768px) { ... }, og CSS-reglene inni krøllparentesene gjelder bare når skjermen er minst 768 piksler bred. Tenk deg et rutenett av kort. På en smal mobilskjerm vil du kanskje ha dem i én kolonne. Men ved 768 piksler kan du la dem bli to kolonner, og ved 1024 piksler tre kolonner. Hver media query slår inn ved sin bredde og endrer layouten.
De punktene der layouten skifter, kaller vi breakpoints. Det finnes ingen hellige tall, men noen er svært vanlige: mobil regnes typisk fra 0 til 767 piksler, nettbrett fra 768 til 1023, og desktop fra 1024 og oppover. Du velger breakpoints ut fra der innholdet ditt faktisk trenger å endre seg -- ikke ut fra spesifikke telefonmodeller. Poenget er at den samme HTML-en, med hjelp av media queries, kan presentere seg helt ulikt på en liten og en stor skjerm. Det er som om siden har flere antrekk og bytter etter anledningen.
Å begynne i det små
Når du skal bygge en responsiv side, kan du begynne fra to retninger -- og valget har større betydning enn du skulle tro. Den smarteste tilnærmingen heter mobile-first, og den går ut på å designe for mobil først, og deretter legge til stiler for større skjermer.
I praksis betyr det at din grunnleggende CSS er laget for den lille skjermen. Så bruker du min-width media queries til å legge til og forbedre etter hvert som skjermen blir større. En navigasjonsmeny kan for eksempel være en vertikal kolonne på mobil -- flex-direction: column -- og så bytte til en horisontal rad på nettbrett og oppover med en media query. Du bygger fra det enkle mot det rike, ikke omvendt.
Hvorfor er dette bedre enn å starte med desktop? Av flere grunner. For det første får mobilen bare den CSS-en den faktisk trenger, noe som gir raskere lasting på de enhetene som ofte har dårligst nettforbindelse. For det andre tvinger det deg til å prioritere det aller viktigste innholdet, siden det er begrenset plass på en liten skjerm. Og for det tredje er det generelt enklere å legge til funksjonalitet for større skjermer enn å fjerne den for mindre. Mobile-first er ikke bare en teknikk -- det er en sunn tankegang som gir bedre sider for alle.
Bilder og enheter som strekker seg
Det siste vi trenger for en virkelig responsiv side, er at bildene og målenhetene også tilpasser seg. Et bilde med fast bredde kan velte hele mobillayouten ved å stikke utenfor skjermen. Løsningen er enkel og elegant: regelen img { max-width: 100%; height: auto; }. Den sier at bildet aldri skal bli bredere enn beholderen sin, og at høyden skal justeres automatisk så proporsjonene beholdes. Bildet strekker og krymper seg pent etter plassen.
Vil du gå lenger og faktisk levere ulike bilder til ulike skjermer -- et lite bilde til mobil for å spare data, et stort til desktop -- finnes <picture>-elementet. Det lar deg liste opp flere bildekilder med tilhørende betingelser, og nettleseren velger det som passer best for skjermen. Slik slipper mobilbrukeren å laste ned et kjempebilde som likevel vises i miniatyr.
Til slutt: glem de faste pikslene der du kan. Responsivt design lever på relative enheter som strekker seg. Enheten rem er relativ til rotskriftstørrelsen og er flott til skrift og avstander. Prosent (%) er fin til bredder, som er relative til forelderen. Enhetene vw og vh er prosent av selve viewporten -- nyttig for elementer som skal fylle hele skjermen. Og fr fordeler plass i Grid, som vi har sett. Ved å bygge med relative enheter i stedet for låste piksler, lager du en side som flyter naturlig på alle skjermstørrelser -- akkurat slik det responsive designet krever.
Oppsummering
Vi har lært å lage nettsider som tilpasser seg alle skjermer. Alt starter med viewport-taggen, som forteller mobilen at sidebredden skal matche den ekte skjermbredden -- uten den faller alt annet sammen. Media queries med @media (min-width: ...) lar siden bytte layout ved bestemte breakpoints, typisk rundt 768px for nettbrett og 1024px for desktop.
Vi så hvorfor mobile-first er den smarte strategien: designe for liten skjerm først og legge til for større, noe som gir raskere lasting og tydeligere prioritering. Og vi gjorde innholdet fleksibelt med responsive bilder (max-width: 100% og <picture>) og relative enheter som rem, %, vw og fr. Med disse verktøyene flyter siden din naturlig fra den minste telefon til den største skjerm.
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.