4.4 Responsivt design med CSS | IT 1

Lær om media queries, mobile-first, responsive bilder og viewport-enheter.

65 min

7 oppgaver

Responsivt designMedia queryBreakpointMobile-first

Du leser den tradisjonelle versjonen

Din fremgang i kapitlet

0 / 7 oppgaver

Responsivt design med CSS

Folk bruker nettsider på alt fra små mobiltelefoner med 375 piksler bredde til store skrivebordsmonitorer med over 2500 piksler. En nettside som ser flott ut på en stor skjerm kan være umulig å bruke på en mobiltelefon hvis den ikke er tilpasset. Responsivt design handler om å lage nettsider som automatisk tilpasser seg skjermstørrelsen de vises på, slik at brukeren alltid får en god opplevelse.

Begrepet responsivt webdesign ble først brukt av Ethan Marcotte i 2010, og har siden blitt en universell standard. I dag forventer alle – brukere, arbeidsgivere og søkemotorer – at nettsider fungerer godt på alle enheter. Google bruker til og med mobilversjonen av nettsider som grunnlag for søkerangering, noe som gjør responsivt design viktig også for synlighet på nett.

I dette kapittelet skal du lære de viktigste teknikkene for responsivt design: viewport-innstillinger, CSS media queries, mobile-first-prinsippet, responsive bilder og viewport-enheter.

Responsivt design

Responsivt design er en tilnærming til webdesign der layouten, bildene og innholdet automatisk tilpasser seg størrelsen på skjermen de vises på. Et responsivt design bruker fleksible rutenett, fleksible bilder og CSS media queries for å endre presentasjonen avhengig av viewport-størrelsen. Resultatet er at den samme HTML-koden kan gi en optimal opplevelse på mobiltelefon, nettbrett og desktop uten at man trenger separate versjoner av nettsiden.

Det første steget for responsivt design er å legge til viewport-meta-taggen i HTML-dokumentets <head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Denne taggen forteller mobilnettlesere at de skal bruke enhetens faktiske bredde som viewport-bredde, i stedet for å late som om skjermen er 980 piksler bred (som er standardoppførselen). Uten denne taggen vil mobilnettlesere vise hele desktop-layouten nedskalert, noe som gjør teksten for liten til å lese og knappene for små til å trykke på.

Parametrene i taggen betyr:
- width=device-width: Sett viewport-bredden lik enhetens bredde
- initial-scale=1.0: Ikke zoom inn eller ut ved lasting

Denne taggen skal alltid være med i alle HTML-dokumenter du lager. Den er så grunnleggende at de fleste kodeeditorer inkluderer den automatisk i HTML-maler.

Media query

En media query er en CSS-teknikk som lar deg anvende stilregler betinget, basert på egenskaper ved enheten eller viewport. Media queries skrives med @media -regelen etterfulgt av en betingelse i parentes. Alle CSS-regler innenfor blokken gjelder bare når betingelsen er oppfylt. Den vanligste betingelsen er skjermbredde, for eksempel @media (min-width: 768px) som betyr «når skjermbredden er minst 768 piksler».

Media queries er det viktigste verktøyet for responsivt design. De lar deg definere ulike CSS-regler for ulike skjermstørrelser. 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 også bruke max-width for å målrette mot smale skjermer:

/* Gjelder bare for skjermer smalere enn 600px */
@media (max-width: 600px) {
  .navigasjon {
    flex-direction: column;
  }
}

Media queries kan kombineres 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;
  }
}

Vanlige media query-betingelser inkluderer:
- min-width / max-width – skjermbredde
- min-height / max-height – skjermhøyde
- orientation: portrait / orientation: landscape – stående eller liggende
- prefers-color-scheme: dark – brukerens preferanse for mørkt tema
- prefers-reduced-motion: reduce – brukerens preferanse for redusert bevegelse

✏️Eksempel: Responsiv navigasjonsmeny

Her er et praktisk eksempel på en navigasjonsmeny som endrer layout basert på skjermstørrelse:

<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 vises menyen vertikalt under logoen med synlige knapper. På nettbrett og desktop vises logoen og menyen side om side i en horisontal linje. Media querien @media (min-width: 768px) aktiverer desktop-layouten når skjermen er bred nok.

Mobile-first betyr at du starter med å designe og kode for den minste skjermstørrelsen, og deretter legger til stiler for større skjermer med min-width media queries. Dette er det motsatte av desktop-first, der man starter med desktop og bruker max-width for å tilpasse til mobil.

Hvorfor mobile-first?

1. Ytelse: Mobile enheter laster bare grunnstilene. Desktop-stiler lastes kun når de trengs.
2. Prioritering: Du tvinges til å fokusere på det viktigste innholdet først, fordi plassen er begrenset.
3. Progressiv forbedring: Grunnopplevelsen fungerer overalt, og større skjermer får forbedringer.
4. SEO: Google indekserer mobile-first, så mobilversjonen er den viktigste for søkerangering.

Sammenligning av tilnærminger:

/* 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 skriver du de enkleste stilene først (én kolonne) og legger til kompleksitet (tre kolonner) for større skjermer. Denne rekkefølgen er mer logisk og lettere å vedlikeholde.

Breakpoint

Et breakpoint er et punkt i skjermbredden der layouten endres via en media query. Breakpoints markerer overgangen mellom ulike layoutvarianter, for eksempel fra én kolonne på mobil til to kolonner på nettbrett. Vanlige breakpoints er 480px (stor mobil), 768px (nettbrett), 1024px (liten laptop) og 1200px (desktop). Man bør velge breakpoints basert på når innholdet trenger en ny layout, ikke basert på spesifikke enhetsmodeller, fordi nye enheter med nye størrelser kommer hele tiden.

Bilder er ofte den største ressursen på en nettside, og det er viktig at de tilpasser seg skjermstørrelsen. Den enkleste teknikken er å sette max-width: 100% på bilder:

img {
  max-width: 100%;
  height: auto;
}

Dette sørger for at bildet aldri er bredere enn foreldreelementet, og height: auto bevarer bildeforholdet. Denne regelen bør være med i alle prosjektene dine som en grunnstil.

For mer avansert kontroll bruker 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 forteller srcset nettleseren hvilke bildestørrelser som er tilgjengelige, og sizes forteller hvor bredt bildet vil bli vist ved ulike viewport-størrelser. Nettleseren velger automatisk den mest passende bildefilen basert på skjermoppløsning og viewport-bredde.

<picture>-elementet gir enda mer 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 helt forskjellige bilder på ulike skjermstørrelser. For eksempel et bredt panoramabilde på desktop og et beskåret portrettbilde på mobil.

Viewport-enheter er CSS-enheter som er relative til størrelsen på nettleservinduet:

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()-funksjonen er spesielt nyttig for responsiv typografi. Den tar tre verdier: minimum, foretrukket og maksimum. clamp(1.5rem, 4vw, 3.5rem) betyr at skriftstørrelsen er 4vw (4% av viewport-bredden), men aldri mindre enn 1.5rem og aldri større enn 3.5rem. Dette gir jevn skalering uten media queries.
Obs! 100vh kan oppføre seg uventet på mobiltelefoner fordi adresselinjen i nettleseren endrer den synlige høyden. Den nyere enheten dvh (dynamic viewport height) tar hensyn til dette:

.heltseksjon {
  height: 100dvh;  /* Dynamisk viewport-høyde */
}

✏️Eksempel: Komplett responsiv nettside

Her er et komplett eksempel på en 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: Mobilstilene kommer først uten media queries, deretter bygger vi på med min-width: 768px for nettbrett og min-width: 1024px for desktop. Rutenettet går fra 1 kolonne (mobil) til 2 kolonner (nettbrett) til 3 kolonner (desktop).

Responsivt design er en sentral ferdighet i moderne webutvikling. De viktigste prinsippene å huske er:

- Viewport-meta-taggen må alltid være med for at responsivt design skal fungere på mobile enheter
- Mobile-first betyr å starte med mobilstiler og bruke min-width media queries for større skjermer
- Breakpoints bør velges basert på innholdet, ikke spesifikke enheter
- Responsive bilder med max-width: 100% er en grunnleggende regel som alltid bør inkluderes
- Viewport-enheter (vw, vh) og clamp() gir fleksibel skalering uten mange media queries
- Test alltid designet ditt i nettleserens utviklerverktøy med ulike skjermstørrelser

📝Oppgave 4.4.1

Hva gjør viewport-meta-taggen <meta name="viewport" content="width=device-width, initial-scale=1.0">?

📝Oppgave 4.4.2

Hva er mobile-first-prinsippet i CSS?

📝Oppgave 4.4.3

Gitt følgende CSS, hva er bakgrunnsfargen på et element med klassen .boks når skjermbredden er 900px?

.boks {
  background-color: red;
}

@media (min-width: 600px) {
  .boks {
    background-color: blue;
  }
}

@media (min-width: 1024px) {
  .boks {
    background-color: green;
  }
}

📝Oppgave 4.4.4

Skriv CSS med mobile-first-tilnærming for et kort-rutenett med klassen .produkter. Kravene:
- Mobil: Kortene skal vises i én kolonne med 1rem avstand
- Nettbrett (768px og oppover): To kolonner med 1.5rem avstand
- Desktop (1200px og oppover): Fire kolonner med 2rem avstand
- Bruk CSS Grid

📝Oppgave 4.4.5

Lag HTML og CSS for en responsiv heltseksjon (hero section) med følgende krav:
- Bakgrunn med gradient fra mørkeblå til lilla
- Hvit tekst med en stor overskrift og en undertekst
- Overskriften skal skalere med viewport-bredden, men ha minimum 1.5rem og maksimum 4rem
- Seksjonen skal fylle hele viewport-høyden
- Alt innhold skal være sentrert både horisontalt og vertikalt

Bruk viewport-enheter og clamp().

📝Oppgave 4.4.6

Lag en komplett responsiv profilkort-seksjon. Skriv HTML og CSS med mobile-first:
- Hvert kort har et bilde, navn, rolle og en kort beskrivelse
- Mobil: Kortene i én kolonne, bildet over teksten
- Nettbrett (768px): To kort per rad
- Desktop (1024px): Kortene vises horisontalt med bilde til venstre og tekst til høyre
- Bruk media queries, flexbox og/eller grid
- Bildene skal være responsive

📝Oppgave 4.4.7

Hva gjør 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 tilpasser seg skjermstørrelsen.
- Media query: anvender stilregler basert på skjermegenskaper.
- Mobile-first: design for mobil først, utvid mot større skjermer.
- Breakpoint: punkt der layouten endres.
- Responsive bilder og viewport-enheter: tilpasser innhold 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.