Lær å lage nettsider som fungerer godt på alle skjermstørrelser, fra mobil til desktop, med responsive teknikker.
Responsivt webdesign
Over halvparten av all nettrafikk kommer fra mobiltelefoner. En nettside som bare ser bra ut på en datamaskin vil frustrere mobilbrukere. Responsivt webdesign betyr at nettsiden automatisk tilpasser seg skjermstørrelsen – enten brukeren er på mobil, nettbrett eller storskjerm.
I dette kapittelet lærer du teknikkene som gjør dette mulig: viewport-meta, media queries, mobile-first-design og responsive bilder.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Uten denne taggen vil mobilnettleseren vise skrivebordsversjonen i miniatyr. Med taggen tilpasses bredden til enhetens skjermbredde.
Media queries
Media queries lar deg anvende CSS-regler kun når bestemte betingelser er oppfylt, vanligvis basert på skjermbredden:
/* Basis-stiler (mobil) */
.container {
padding: 1rem;
}
.kort-grid {
display: grid;
grid-template-columns: 1fr; /* én kolonne på mobil */
gap: 1rem;
}
/* Nettbrett (768px og oppover) */
@media (min-width: 768px) {
.kort-grid {
grid-template-columns: 1fr 1fr; /* to kolonner */
}
}
/* Desktop (1024px og oppover) */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
.kort-grid {
grid-template-columns: repeat(3, 1fr); /* tre kolonner */
}
}Vanlige breakpoints:
- Mobil: 0–767px
- Nettbrett: 768–1023px
- Desktop: 1024px og oppover
Mobile-first og responsive bilder
Mobile-first betyr at du skriver basis-CSS for mobil og bruker min-width media queries for å legge til stiler for større skjermer:
/* Mobile-first: basis er for mobil */
.nav {
flex-direction: column; /* vertikal meny på mobil */
}
@media (min-width: 768px) {
.nav {
flex-direction: row; /* horisontal meny på nettbrett+ */
}
}Fordeler med mobile-first:
- Mobil får bare den CSS den trenger (raskere lasting)
- Tvinger deg til å prioritere innholdet
- Enklere å legge til enn å fjerne funksjonalitet
Responsive bilder må også tilpasse seg skjermstørrelsen:
img {
max-width: 100%; /* aldri bredere enn forelderen */
height: auto; /* behold proporsjoner */
}For å levere optimale bilder til ulike enheter kan du bruke <picture>-elementet:
<picture>
<source media="(min-width: 1024px)" srcset="bilde-stor.jpg">
<source media="(min-width: 768px)" srcset="bilde-medium.jpg">
<img src="bilde-liten.jpg" alt="Beskrivelse">
</picture>Fleksible enheter
Bruk relative enheter i stedet for piksler for fleksibel design:
| Enhet | Beskrivelse | Bruksområde |
|---|---|---|
rem | Relativt til rot-skriftstørrelse | Skriftstørrelse, margin, padding |
em | Relativt til forelderens skriftstørrelse | Skriftstørrelse i kontekst |
% | Prosentandel av forelder | Bredder |
vw/vh | Prosentandel av viewport | Full-skjerm-elementer |
fr | Fraksjon i CSS Grid | Grid-kolonner |
/* Eksempel: responsiv typografi */
html { font-size: 16px; }
h1 { font-size: 2rem; } /* 32px */
p { font-size: 1rem; } /* 16px */
.hero {
height: 100vh; /* full skjermhøyde */
width: 100vw; /* full skjermbredde */
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}/* Mobile-first: kortene stables vertikalt */
.kort-container {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 1rem;
}
.kort {
background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.kort img {
width: 100%;
border-radius: 8px;
}
/* Nettbrett: to kolonner */
@media (min-width: 768px) {
.kort-container {
grid-template-columns: repeat(2, 1fr);
padding: 2rem;
}
}
/* Desktop: tre kolonner */
@media (min-width: 1024px) {
.kort-container {
grid-template-columns: repeat(3, 1fr);
max-width: 1200px;
margin: 0 auto;
}
}På mobil vises kortene i én kolonne, på nettbrett i to, og på desktop i tre kolonner.
Oppsummering
- Responsivt design tilpasser nettsiden til alle skjermstørrelser
- Viewport-meta-taggen er nødvendig for riktig skalering på mobil
- Media queries bruker @media (min-width: ...) for å endre stiler ved ulike skjermbredder
- Mobile-first betyr å designe for mobil først og legge til for større skjermer
- Responsive bilder bruker max-width: 100% og <picture>-elementet
- Bruk relative enheter (rem, %, vw) i stedet for piksler for fleksibilitet
- Vanlige breakpoints: 768px (nettbrett) og 1024px (desktop)
Oppgaver
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.