Vad är responsiv webbdesign – och varför spelar det roll?

2 april 2026 David Eriksson 0

Responsiv webbdesign innebär att en webbsida anpassar sig automatiskt till skärmen den visas på — oavsett om det är en telefon, surfplatta, laptop eller ultrawide-monitor. Det är inte en separat teknik utan ett förhållningssätt till design och utveckling som blivit så grundläggande att det idag är svårt att tänka sig ett alternativ.

Här går vi igenom hur responsiv design fungerar i praktiken, vilka CSS-verktyg du har att arbeta med, och varför mobile first-strategin fortfarande gäller.

Hur responsiv design fungerar

Kärnan i responsiv webbdesign är tre saker: flexibla layouter, flexibla bilder och mediaqueries. Begreppet myntades av Ethan Marcotte 2010, och grundprinciperna håller fortfarande — även om verktygslådan har vuxit enormt sedan dess.

Viewport-metataggen är startpunkten. Utan den behandlar mobila webbläsare sidan som om den vore designad för desktop och krymper ner den:

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

Den raden säger: ”Gör viewportens bredd lika med enhetens bredd, och starta utan zoom.” Det är en rad som måste finnas i <head> på varje responsiv sida.

Mobile first — varför du bör börja litet

Mobile first innebär att du designar och kodar för den minsta skärmen först, och sedan lägger till komplexitet för större skärmar med min-width-mediaqueries. Det låter kontraintuitivt, men det tvingar dig att prioritera innehåll och funktion — du kan inte gömma problem bakom en bredare yta.

/* Basstil: gäller alla skärmstorlekar (mobil först) */
.container {
  padding: 1rem;
}

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* Surfplatta och uppåt */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
  }

  .card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }

  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

Basstilen med 1fr ger en enda kolumn på mobil. Vid 768px går vi till två kolumner, vid 1024px till tre. max-width och margin: 0 auto centrerar innehållet på breda skärmar.

En vanlig fråga är vilka breakpoints man ska använda. Det finns inga universella svar, men 640px (stor telefon), 768px (surfplatta), 1024px (liten laptop) och 1280px (desktop) är rimliga utgångspunkter. Det viktigaste är att breakpoints baseras på var din layout behöver ändras, inte på specifika enhetsmodeller — nya enheter släpps hela tiden med nya skärmstorlekar.

Responsiva enheter: rem, em, vw och clamp()

Pixlar är fasta. Responsiv design kräver relativa enheter som skalas med sitt sammanhang:

rem är relativ till root-elementets fontstorlek (oftast 16px). 1.5rem är alltid 24px oavsett var i dokumentet du befinner dig. em är relativ till förälderns fontstorlek. 1.5em på ett element inuti en <h2> med font-size: 20px blir 30px. vw och vh är relativ till viewportens bredd respektive höjd. 1vw = 1% av viewport-bredden.

clamp() kombinerar allt och ger dig responsiva värden utan mediaqueries:

h1 {
  font-size: clamp(1.75rem, 1.5rem + 1.5vw, 3rem);
}

.section {
  padding: clamp(1.5rem, 3vw, 4rem);
}

clamp() tar tre värden: minimum, önskat värde och maximum. Texten skalas flytande med viewport-bredden men går aldrig under 1.75rem eller över 3rem. Det eliminerar behovet av mediaqueries för typografi och spacing.

Responsiva bilder

Bilder som inte anpassar sig är det snabbaste sättet att förstöra en mobilupplevelse. Den grundläggande regeln är enkel:

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

Men det räcker inte alltid. En 2000px bred hero-bild som krymps till 375px med CSS laddas fortfarande i full storlek — det är slöseri med data och bandbredd. HTML:s srcset-attribut löser det:

<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, (max-width: 1024px) 80vw, 1200px"
  alt="Beskrivning av bilden"
/>

Webbläsaren väljer rätt bildstorlek baserat på viewport-bredden och enhetens pixeldensitet. På en iPhone med 375px viewport och 3x pixeldensitet behövs en bild som är 375 × 3 = 1125 pixlar bred — webbläsaren väljer automatiskt hero-1600.jpg från listan.

Responsiv typografi

Textstorlek som är behaglig på desktop kan vara för stor eller för liten på mobil. clamp() är det moderna svaret, men du kan också använda en enkel skala med mediaqueries:

:root {
  font-size: 100%; /* 16px */
}

body {
  font-size: 1rem;
  line-height: 1.7;
}

@media (min-width: 1024px) {
  :root {
    font-size: 112.5%; /* 18px */
  }
}

Genom att ändra root-fontstorleken skalas allt som använder rem automatiskt. Det ger dig en global typografisk kontroll med en enda ändring.

Container queries — nästa steg i responsiv design

Mediaqueries utgår alltid från viewportens bredd. Men vad händer när samma komponent används i en bred huvudkolumn och i en smal sidebar? Med mediaqueries måste du hårdkoda breakpoints per kontext. Container queries löser det:

.card-container {
  container-type: inline-size;
}

.card {
  display: grid;
  grid-template-columns: 1fr;
}

@container (min-width: 400px) {
  .card {
    grid-template-columns: 150px 1fr;
  }
}

Istället för att fråga ”hur bred är viewporten?” frågar regeln ”hur bred är min container?” Det betyder att kortet automatiskt byter layout beroende på var det placeras — bredvid en sidebar blir det stående, i en fullbreddsektion blir det liggande. Samma komponent, inget duplicerat CSS.

Container queries stöds i alla moderna webbläsare sedan 2023 och är redo för produktion.

Testa responsivitet

Chrome DevTools responsivläge (Ctrl+Shift+M) låter dig simulera olika enheter och skärmstorlekar. Men simulering ersätter inte riktiga enheter — touch-interaktioner, skärmläsare och verklig nätverksprestanda beter sig annorlunda.

Använd också Lighthouse i DevTools för att kontrollera att viewport-metataggen finns, att texten är läsbar utan zoom och att tryckytor är tillräckligt stora.

Sammanfattning

Responsiv webbdesign handlar om att bygga sidor som fungerar på alla skärmstorlekar. Börja med viewport-metataggen och en mobile first-strategi. Använd CSS Grid och Flexbox med relativa enheter istället för fasta pixelvärden. clamp() ger dig flytande skalning utan mediaqueries. srcset och sizes ser till att rätt bildstorlek laddas. Och testa alltid på riktiga enheter — simulatorer visar inte hela bilden.