CSS - RWD (Responsive Web Design)

Responsivt webdesign (RWD) handler om å lage nettsider som ser bra ut og fungerer optimalt på alle skjermstørrelser, fra små mobiltelefoner til store dataskjermer. Nøkkelen til dette i CSS er å bruke Media Queries (@media).

Mobile-First tilnærming

I moderne nettsideutvikling bruker vi nesten alltid en teknikk som kalles Mobile-First. Det betyr at vi først skriver CSS-koden som gjelder for mobiltelefoner (den minste skjermen). Mobil-layouter er som oftest enklere, typisk fordi alt innholdet legges i én kolonne nedover skjermen.

Deretter bruker vi en @media-spørring for å utvide designet kun for større skjermer, for eksempel for å legge elementene ved siden av hverandre når skjermen er bred nok til det.

/* 1. Standard-kode for MOBIL (Mobile-first) */
 .container {
   display: flex;
   flex-direction: column; /* Stable elementene oppå hverandre */
 }

 /* 2. Media Query for STØRRE SKJERMER (f.eks. nettbrett og PC) */
 @media (min-width: 768px) {
   .container {
     flex-direction: row; /* Vis elementene ved siden av hverandre */
   }
 }

Slik fungerer (min-width: ...)

Når vi skriver @media (min-width: 768px), sier vi til nettleseren:
"Bruk denne CSS-koden KUN hvis skjermen er minimum 768 piksler bred (altså 768px eller større)."

Koden på toppen (utenfor @media) gjelder for alle skjermer, og fungerer som vår grunnmur.
Når nettleservinduet passerer "knekkpunktet" (breakpointet) på 768px, vil koden inni @media slå inn og overstyre mobil-koden hvis det er konflikter (som f.eks. at column endres til row).

Eksempel: Hamburger-meny uten JavaScript

Et klassisk eksempel på "Mobile-first" og responsivt design er en navigasjonsmeny som kollapser til en "hamburger" på små skjermer. Ved hjelp av et lurt CSS-triks (kalt "checkbox-hack") kan vi faktisk lage en fungerende meny helt uten JavaScript!

1. Konseptet ("Checkbox-hack")

Trikset går ut på å bruke en usynlig <input type="checkbox"> sammen med en <label>. Når vi klikker på labelen (som vi styler til å se ut som et hamburger-ikon med tre streker), krysses checkboxen av i bakgrunnen. I CSS kan vi da lytte etter :checked for å vise eller skjule menyen.

2. HTML-strukturen

<nav>
   <!-- skjult checkbox som styrer visning -->
   <input type="checkbox" id="menu-toggle">

   <!-- for-attributtet utløser 'checked' på input-elementet -->
   <label class="menu-icon" for="menu-toggle">
     <span></span> <!-- 3 spans som danner strekene i hamburgeren -->
     <span></span>
     <span></span>
   </label>

   <!-- selve navigasjonsmenyen -->
   <div class="menu">
     <a href="#hjem">Hjem</a>
     <a href="#om">Om</a>
   </div>
 </nav>

3. CSS med Mobile-First

Først styler vi oppsettet for mobil. Menyen holdes skjult (display: none), og vi bruker #menu-toggle:checked ~ .menu til å vise den. Når skjermen er over 768px bred (inne i media query-en), fjerner vi hamburger-knappen og tvinger menyen til å alltid være synlig i en vannrett linje!

/* --- MOBIL FØRST (Standard) --- */
 /* Skjul den ekte checkboxen */
 #menu-toggle { display: none; }

 /* Hamburger-ikonet (synlig på mobil) */
 .menu-icon span {
   display: block;
   height: 3px;
   background: white;
 }

 /* Gjør menyen usynlig som standard på mobil */
 .menu {
   display: none;
   flex-direction: column;
 }

 /* Når checkbox er aktiv (klikk på label) -> vis meny */
 #menu-toggle:checked ~ .menu {
   display: flex;
 }

 /* --- STØRRE SKJERMER (Responsive) --- */
 @media (min-width: 768px) {
   .menu {
     display: flex; /* Alltid synlig */
     flex-direction: row; /* Horisontal meny */
   }

   .menu-icon {
     display: none; /* Skjul hamburger-ikonet */
   }
 }