Lær om media queries, mobile-first, responsive bilder og viewport-enheter.
Responsivt design med CSS
Folk brukar nettsider på alt frå små mobiltelefonar med 375 pikslar breidd til store skrivebordsmonitorar med over 2500 pikslar. Ei nettside som ser flott ut på ein stor skjerm kan vere umogleg å bruke på ein mobiltelefon dersom ho ikkje er tilpassa. Responsivt design handlar om å lage nettsider som automatisk tilpassar seg skjermstorleiken dei blir viste på, slik at brukaren alltid får ei god oppleving.
Omgrepet responsivt webdesign vart først brukt av Ethan Marcotte i 2010, og har sidan blitt ein universell standard. I dag forventar alle – brukarar, arbeidsgjevarar og søkjemotorar – at nettsider fungerer godt på alle einingar. Google brukar til og med mobilversjonen av nettsider som grunnlag for søkjerangering, noko som gjer responsivt design viktig òg for synlegheit på nett.
I dette kapittelet skal du lære dei viktigaste teknikkane for responsivt design: viewport-innstillingar, CSS media queries, mobile-first-prinsippet, responsive bilete og viewport-einingar.
Det første steget for responsivt design er å leggje til viewport-meta-taggen i HTML-dokumentet sin <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Denne taggen fortel mobilnettlesarar at dei skal bruke den faktiske breidda til eininga som viewport-breidd, i staden for å late som om skjermen er 980 pikslar brei (som er standardåtferda). Utan denne taggen vil mobilnettlesarar vise heile desktop-layouten nedskalert, noko som gjer teksten for liten til å lese og knappane for små til å trykkje på.
Parametrane i taggen tyder:
- width=device-width: Set viewport-breidda lik breidda til eininga
- initial-scale=1.0: Ikkje zoom inn eller ut ved lasting
Denne taggen skal alltid vere med i alle HTML-dokument du lagar. Han er så grunnleggjande at dei fleste kodeeditorar inkluderer han automatisk i HTML-malar.
Ei media query er ein CSS-teknikk som lèt deg bruke stilreglar betinga, basert på eigenskapar ved eininga eller viewporten. Media queries blir skrivne med @media-regelen etterfølgd av ei betinging i parentes. Alle CSS-reglar innanfor blokka gjeld berre når betinginga er oppfylt. Den vanlegaste betinginga er skjermbreidd, til dømes @media (min-width: 768px) som tyder «når skjermbreidda er minst 768 pikslar».
Media queries er det viktigaste verktøyet for responsivt design. Dei lèt deg definere ulike CSS-reglar for ulike skjermstorleikar. Syntaksen er:
/* Grunnstiler som alltid gjelder */
body {
font-family: Arial, sans-serif;
padding: 1rem;
}
/* Stiler som gjelder når skjermen er minst 768px bred */
@media (min-width: 768px) {
body {
padding: 2rem;
max-width: 1200px;
margin: 0 auto;
}
}
/* Stiler som gjelder når skjermen er minst 1024px bred */
@media (min-width: 1024px) {
body {
padding: 3rem;
}
}Du kan òg bruke max-width for å målrette mot smale skjermar:
/* Gjelder bare for skjermer smalere enn 600px */
@media (max-width: 600px) {
.navigasjon {
flex-direction: column;
}
}Media queries kan kombinerast med and, or (komma), og not:
/* Gjelder for skjermer mellom 768px og 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
.sidebar {
width: 200px;
}
}
/* Gjelder for enten smale skjermer eller utskrift */
@media (max-width: 600px), print {
.reklame {
display: none;
}
}Vanlege media query-betingingar inkluderer:
- min-width / max-width – skjermbreidd
- min-height / max-height – skjermhøgd
- orientation: portrait / orientation: landscape – ståande eller liggjande
- prefers-color-scheme: dark – preferansen til brukaren for mørkt tema
- prefers-reduced-motion: reduce – preferansen til brukaren for redusert rørsle
Her er eit praktisk døme på ein navigasjonsmeny som endrar layout basert på skjermstorleik:
<header class="toppfelt">
<h1 class="logo">MinSide</h1>
<nav class="meny">
<a href="/">Hjem</a>
<a href="/tjenester">Tjenester</a>
<a href="/prosjekter">Prosjekter</a>
<a href="/kontakt">Kontakt</a>
</nav>
</header>/* Mobile-first: Grunnstiler for mobil */
.toppfelt {
background-color: #1a1a2e;
color: white;
padding: 1rem;
}
.logo {
font-size: 1.5rem;
margin: 0 0 1rem 0;
text-align: center;
}
.meny {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.meny a {
color: white;
text-decoration: none;
padding: 0.75rem 1rem;
background-color: #16213e;
border-radius: 6px;
text-align: center;
}
.meny a:hover {
background-color: #0f3460;
}
/* Nettbrett og oppover */
@media (min-width: 768px) {
.toppfelt {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
}
.logo {
margin: 0;
text-align: left;
}
.meny {
flex-direction: row;
gap: 0;
}
.meny a {
background-color: transparent;
border-radius: 0;
padding: 0.5rem 1rem;
}
.meny a:hover {
background-color: rgba(255, 255, 255, 0.1);
}
}På mobil blir menyen vist vertikalt under logoen med synlege knappar. På nettbrett og desktop blir logoen og menyen viste side om side i ei horisontal linje. Media querien @media (min-width: 768px) aktiverer desktop-layouten når skjermen er brei nok.
min-width media queries. Dette er det motsette av desktop-first, der ein startar med desktop og brukar max-width for å tilpasse til mobil.Kvifor mobile-first?
1. Yting: Mobile einingar lastar berre grunnstilane. Desktop-stilar blir berre lasta når dei trengst.
2. Prioritering: Du blir tvinga til å fokusere på det viktigaste innhaldet først, fordi plassen er avgrensa.
3. Progressiv forbetring: Grunnopplevinga fungerer overalt, og større skjermar får forbetringar.
4. SEO: Google indekserer mobile-first, så mobilversjonen er den viktigaste for søkjerangering.
Samanlikning av tilnærmingar:
/* Desktop-first (anbefales IKKE) */
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 2rem;
}
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
gap: 1rem;
}
}
/* Mobile-first (anbefalt) */
.container {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 768px) {
.container {
grid-template-columns: 1fr 1fr 1fr;
gap: 2rem;
}
}Med mobile-first skriv du dei enklaste stilane først (éin kolonne) og legg til kompleksitet (tre kolonnar) for større skjermar. Denne rekkjefølgja er meir logisk og lettare å vedlikehalde.
Eit breakpoint er eit punkt i skjermbreidda der layouten endrar seg via ei media query. Breakpoints markerer overgangen mellom ulike layoutvariantar, til dømes frå éin kolonne på mobil til to kolonnar på nettbrett. Vanlege breakpoints er 480px (stor mobil), 768px (nettbrett), 1024px (liten laptop) og 1200px (desktop). Ein bør velje breakpoints basert på når innhaldet treng ein ny layout, ikkje basert på spesifikke einingsmodellar, fordi nye einingar med nye storleikar kjem heile tida.
Bilete er ofte den største ressursen på ei nettside, og det er viktig at dei tilpassar seg skjermstorleiken. Den enklaste teknikken er å setje max-width: 100% på bilete:
img {
max-width: 100%;
height: auto;
}Dette sørgjer for at biletet aldri er breiare enn foreldreelementet, og height: auto bevarer biletforholdet. Denne regelen bør vere med i alle prosjekta dine som ein grunnstil.
For meir avansert kontroll brukar du srcset og sizes i HTML:
<img
src="bilde-800.jpg"
srcset="bilde-400.jpg 400w, bilde-800.jpg 800w, bilde-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, (max-width: 1024px) 50vw, 33vw"
alt="Beskrivelse av bildet"
>Her fortel srcset nettlesaren kva biletstorleikar som er tilgjengelege, og sizes fortel kor breitt biletet vil bli vist ved ulike viewport-storleikar. Nettlesaren vel automatisk den mest passande biletfila basert på skjermoppløysing og viewport-breidd.
<picture>-elementet gir endå meir kontroll:
<picture>
<source media="(min-width: 1024px)" srcset="bilde-desktop.jpg">
<source media="(min-width: 768px)" srcset="bilde-nettbrett.jpg">
<img src="bilde-mobil.jpg" alt="Beskrivelse av bildet">
</picture>Med <picture> kan du vise heilt forskjellige bilete på ulike skjermstorleikar. Til dømes eit breitt panoramabilete på desktop og eit beskore portrettbilete på mobil.
Viewport-einingar er CSS-einingar som er relative til storleiken på nettlesarvindauget:
| Enhet | Betydning | Eksempel |
|---|---|---|
vw | 1% av viewport-bredden | 50vw = halve bredden |
vh | 1% av viewport-høyden | 100vh = full høyde |
vmin | 1% av den minste dimensjonen | Nyttig for kvadratiske elementer |
vmax | 1% av den største dimensjonen | Nyttig for å fylle mest mulig plass |
/* Fullskjerm-heltseksjon */
.heltseksjon {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #1a1a2e;
color: white;
}
.heltseksjon h1 {
font-size: 5vw; /* Skriftstørrelsen skalerer med bredden */
}
/* Responsiv tekststørrelse med clamp() */
h1 {
font-size: clamp(1.5rem, 4vw, 3.5rem);
}clamp(1.5rem, 4vw, 3.5rem) tyder at skriftstorleiken er 4vw (4% av viewport-breidda), men aldri mindre enn 1.5rem og aldri større enn 3.5rem. Dette gir jamn skalering utan media queries.Obs!
100vh kan oppføre seg uventa på mobiltelefonar fordi adresselinja i nettlesaren endrar den synlege høgda. Den nyare eininga dvh (dynamic viewport height) tek omsyn til dette:.heltseksjon {
height: 100dvh; /* Dynamisk viewport-høyde */
}Her er eit komplett døme på ei responsiv nettside med mobile-first-tilnærming:
<!DOCTYPE html>
<html lang="nb">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsiv portfolio</title>
<link rel="stylesheet" href="stil.css">
</head>
<body>
<header class="toppfelt">
<h1>Mitt Portfolio</h1>
<nav class="navigasjon">
<a href="#prosjekter">Prosjekter</a>
<a href="#om">Om meg</a>
<a href="#kontakt">Kontakt</a>
</nav>
</header>
<section class="helt">
<h2>Velkommen!</h2>
<p>Jeg er en webutvikler som lager moderne nettsider.</p>
</section>
<main class="innhold">
<section id="prosjekter" class="prosjekter">
<h2>Mine prosjekter</h2>
<div class="kort-rutenett">
<div class="kort">
<h3>Nettbutikk</h3>
<p>En responsiv nettbutikk bygd med HTML og CSS.</p>
</div>
<div class="kort">
<h3>Blogg</h3>
<p>En personlig blogg med moderne design.</p>
</div>
<div class="kort">
<h3>Dashboard</h3>
<p>Et oversiktlig kontrollpanel med grafer og data.</p>
</div>
</div>
</section>
</main>
</body>
</html>/* Reset og grunnstiler (mobile-first) */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Arial, sans-serif;
line-height: 1.6;
color: #333;
}
img {
max-width: 100%;
height: auto;
}
/* Header – mobil */
.toppfelt {
background-color: #2c3e50;
color: white;
padding: 1rem;
text-align: center;
}
.toppfelt h1 {
font-size: 1.3rem;
margin-bottom: 0.75rem;
}
.navigasjon {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.navigasjon a {
color: white;
text-decoration: none;
padding: 0.5rem;
border-radius: 4px;
background-color: #34495e;
}
/* Heltseksjon – mobil */
.helt {
height: 60vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 2rem;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
}
.helt h2 {
font-size: clamp(1.8rem, 5vw, 3.5rem);
margin-bottom: 1rem;
}
/* Prosjektkort – mobil */
.innhold {
padding: 1.5rem;
}
.kort-rutenett {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
margin-top: 1.5rem;
}
.kort {
background-color: #f8f9fa;
padding: 1.5rem;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
/* --- Nettbrett (768px og oppover) --- */
@media (min-width: 768px) {
.toppfelt {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
text-align: left;
}
.toppfelt h1 {
margin-bottom: 0;
}
.navigasjon {
flex-direction: row;
}
.navigasjon a {
background-color: transparent;
}
.helt {
height: 70vh;
}
.innhold {
padding: 2rem 3rem;
}
.kort-rutenett {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
}
/* --- Desktop (1024px og oppover) --- */
@media (min-width: 1024px) {
.innhold {
max-width: 1200px;
margin: 0 auto;
padding: 3rem;
}
.kort-rutenett {
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.helt {
height: 80vh;
}
}Legg merke til flyten: Mobilstilane kjem først utan media queries, deretter byggjer vi på med min-width: 768px for nettbrett og min-width: 1024px for desktop. Rutenettet går frå 1 kolonne (mobil) til 2 kolonnar (nettbrett) til 3 kolonnar (desktop).
Responsivt design er ein sentral dugleik i moderne webutvikling. Dei viktigaste prinsippa å hugse er:
- Viewport-meta-taggen må alltid vere med for at responsivt design skal fungere på mobile einingar
- Mobile-first tyder å starte med mobilstilar og bruke min-width media queries for større skjermar
- Breakpoints bør veljast basert på innhaldet, ikkje spesifikke einingar
- Responsive bilete med max-width: 100% er ein grunnleggjande regel som alltid bør inkluderast
- Viewport-einingar (vw, vh) og clamp() gir fleksibel skalering utan mange media queries
- Test alltid designet ditt i utviklarverktøyet i nettlesaren med ulike skjermstorleikar
Kva gjer viewport-meta-taggen <meta name="viewport" content="width=device-width, initial-scale=1.0">?
Kva er mobile-first-prinsippet i CSS?
Gitt følgjande CSS, kva er bakgrunnsfargen på eit element med klassen .boks når skjermbreidda er 900px?
.boks {
background-color: red;
}
@media (min-width: 600px) {
.boks {
background-color: blue;
}
}
@media (min-width: 1024px) {
.boks {
background-color: green;
}
}Skriv CSS med mobile-first-tilnærming for eit kort-rutenett med klassen .produkter. Krava:
- Mobil: Korta skal visast i éin kolonne med 1rem avstand
- Nettbrett (768px og oppover): To kolonnar med 1.5rem avstand
- Desktop (1200px og oppover): Fire kolonnar med 2rem avstand
- Bruk CSS Grid
Lag HTML og CSS for ein responsiv heltseksjon (hero section) med følgjande krav:
- Bakgrunn med gradient frå mørkeblå til lilla
- Kvit tekst med ei stor overskrift og ein undertekst
- Overskrifta skal skalere med viewport-breidda, men ha minimum 1.5rem og maksimum 4rem
- Seksjonen skal fylle heile viewport-høgda
- Alt innhald skal vere sentrert både horisontalt og vertikalt
Bruk viewport-einingar og clamp().
Lag ein komplett responsiv profilkort-seksjon. Skriv HTML og CSS med mobile-first:
- Kvart kort har eit bilete, namn, rolle og ei kort skildring
- Mobil: Korta i éin kolonne, biletet over teksten
- Nettbrett (768px): To kort per rad
- Desktop (1024px): Korta blir viste horisontalt med bilete til venstre og tekst til høgre
- Bruk media queries, flexbox og/eller grid
- Bileta skal vere responsive
Kva gjer denne CSS-regelen?
h1 {
font-size: clamp(1.5rem, 4vw + 0.5rem, 3.5rem);
}Oppsummering
I dette kapittelet har du lært:
- Responsivt design: layouten tilpassar seg skjermstoerrelsen.
- Media query: bruker stilreglar basert på skjermeigenskapar.
- Mobile-first: design for mobil først, utvid mot større skjermar.
- Breakpoint: punkt der layouten endrar seg.
- Responsive bilete og viewport-einingar: tilpassar innhald til skjermen.
Noekkelbegreper
| Begrep | Forklaring |
|---|---|
| Responsivt design | Layout som tilpasser seg skjermstoerrelse |
| Media query | CSS-teknikk for betingede stilregler |
| Breakpoint | Skjermbredde der layouten endres |
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.