Lær å lage nettsider som fungerer godt på alle skjermstørrelser, fra mobil til desktop, med responsive teknikker.
Responsivt webdesign
Meir enn halvparten av all nettrafikk kjem frå mobiltelefonar. Ei nettside som berre ser bra ut på ein datamaskin vil frustrere mobilbrukarar. Responsivt webdesign tyder at nettsida automatisk tilpassar seg skjermstorleiken – anten brukaren er på mobil, nettbrett eller storskjerm.
I dette kapittelet lærer du teknikkane som gjer dette mogleg: viewport-meta, media queries, mobile-first-design og responsive bilete.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Utan denne taggen vil mobilnettlesaren vise skrivebordsversjonen i miniatyr. Med taggen blir breidda tilpassa skjermbreidda til eininga.
Media queries
Media queries lèt deg bruke CSS-reglar berre når bestemte vilkår er oppfylte, vanlegvis basert på skjermbreidda:
/* 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 */
}
}Vanlege breakpoints:
- Mobil: 0–767px
- Nettbrett: 768–1023px
- Desktop: 1024px og oppover
Mobile-first og responsive bilete
Mobile-first tyder at du skriv basis-CSS for mobil og bruker min-width media queries for å leggje til stilar for større skjermar:
/* 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+ */
}
}Fordelar med mobile-first:
- Mobil får berre den CSS han treng (raskare lasting)
- Tvingar deg til å prioritere innhaldet
- Enklare å leggje til enn å fjerne funksjonalitet
Responsive bilete må òg tilpasse seg skjermstorleiken:
img {
max-width: 100%; /* aldri bredere enn forelderen */
height: auto; /* behold proporsjoner */
}For å levere optimale bilete til ulike einingar 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 einingar
Bruk relative einingar i staden for pikslar for fleksibel design:
| Eining | Skildring | Bruksområde |
|---|---|---|
rem | Relativt til rot-skriftstorleik | Skriftstorleik, margin, padding |
em | Relativt til skriftstorleiken til forelderen | Skriftstorleik i kontekst |
% | Prosentdel av forelder | Breidder |
vw/vh | Prosentdel av viewport | Full-skjerm-element |
fr | Fraksjon i CSS Grid | Grid-kolonnar |
/* 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 blir korta viste i éin kolonne, på nettbrett i to, og på desktop i tre kolonnar.
Oppsummering
- Responsivt design tilpassar nettsida til alle skjermstorleikar
- Viewport-meta-taggen er nødvendig for rett skalering på mobil
- Media queries bruker @media (min-width: ...) for å endre stilar ved ulike skjermbreidder
- Mobile-first tyder å designe for mobil først og leggje til for større skjermar
- Responsive bilete bruker max-width: 100% og <picture>-elementet
- Bruk relative einingar (rem, %, vw) i staden for pikslar for fleksibilitet
- Vanlege 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.