Konsepter - RWD (Responsive Web Design)

RWD (Responsive Web Design) handler om å lage nettsider som automatisk tilpasser seg størrelsen på skjermen de vises på – enten det er en liten mobiltelefon, et nettbrett eller en stor PC-skjerm.

1. Viewport i <svelte:head>

Mobilnettlesere vil som standard late som om de er en stor PC-skjerm (ofte 980px bred) og zoome ut nettsiden slik at alt blir bittesmått. For at mobilen skal forstå sin reelle bredde, må vi definere en viewport-metatag.

I Svelte / SvelteKit legger vi denne taggen inn i <svelte:head> (eller i app.html):

<svelte:head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </svelte:head>

width=device-width: Setter sidens bredde lik enhetens fysiske bredde i piksler.
initial-scale=1.0: Setter startsiden til 100 % uten automatisk zoom.

2. Mobile-First: Endret CSS-struktur

I moderne webdesign må vi endre måten vi strukturerer CSS-en på ved å følge Mobile-First-prinsippet:

Trinn 1

Standard CSS = Mobil

All generell CSS du skriver utenfor media-queries skal lages for mobil. Mobilvisning er enklest, og elementer stables naturlig i én kolonne nedover.

Trinn 2

@media screen = Større skjerm

Bruk @media screen and (min-width: ...) for å legge til eller overstyre regler kun når skjermen har plass til f.eks. flere kolonner.

⚠️ Unngå dette: Ikke skriv ferdig desktop-layout først for så å "lappe" på med max-width for mobil. Skriv mobil først, og utvid med min-width!

3. @media screen og Flexbox

CSS Flexbox er det mest brukte verktøyet for responsiv layout. Med flex-direction kan vi enkelt bytte mellom loddrett stabling på mobil og vannrett plassering på større skjermer:

/* --- 1. MOBIL FØRST (Standard) --- */
 .layout {
   flex-basis: 100%; /* Stabler boksene under hverandre på mobil */
 } 

 /* --- 2. STØRRE SKJERM (Media Query) --- */
 @media screen and (min-width: 768px) {
   .layout {
     flex-basis: 70%/30%; /* Plasserer boksene side om side på PC/skjerm */
   }
 }

min-width: 768px kalles et knekkpunkt (breakpoint). Koden inni @media aktiveres først når skjermen er 768px bred eller bredere.

4. Interaktiv demonstrasjon

Klikk på knappene under for å teste hvordan samme HTML og CSS oppfører seg på mobil kontra skjerm:

Mobil (< 768px): flex-direction: column

Header / Logo

Hovedinnhold (main)

Kort oppsummert

RWD gjør at én og samme nettside fungerer optimalt på mobil, nettbrett og PC.
<svelte:head> viewport: Forteller nettleseren at den skal bruke enhetens reelle bredde (width=device-width).
Mobile-First: Skriv alltid standard CSS for mobil først uten media query.
@media screen and (min-width: ...): Brukes til å endre f.eks. flexbox fra column til row når skjermplassen tillater det.