3.4 Responsivt webdesign
Lær å lage nettsider som fungerer godt på alle skjermstørrelser, fra mobil til desktop, med responsive teknikker.
55 min
5 oppgaver
Media queriesMobile first-designResponsive bilderViewport og breakpointsFleksible layouts
Din fremgang i kapitlet
0 / 5 oppgaver
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.
Viewport-meta
Viewport-meta-taggen forteller nettleseren hvordan den skal skalere siden på mobile enheter:
``html``
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:
``css
/ 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:
``css
/ 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:
`css`
img {
max-width: 100%; / aldri bredere enn forelderen /
height: auto; / behold proporsjoner /
}
For å levere optimale bilder til ulike enheter kan du bruke -elementet:
`html``
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 |
``
css
/ 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;
}
``✏️Responsiv kortlayout
Eksempel: Kortgrid som tilpasser seg
``css
/ 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
- Bruk relative enheter (rem, %, vw) i stedet for piksler for fleksibilitet
- Vanlige breakpoints: 768px (nettbrett) og 1024px (desktop)
Oppgaver
Lett1 oppgave
Medium3 oppgaver
Vanskelig1 oppgave