Gå til innhold

Responsivt design

Responsivt design betyr at nettsiden tilpasser seg skjermstørrelsen - enten det er en mobil, nettbrett eller PC.

Viewport meta-tag

For at responsivt design skal fungere på mobil, må du ha denne linjen i <head>:

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

Viktig

Uten denne meta-taggen vil mobilen vise siden som en forminsket desktop-side. Se Dokumentstruktur for mer om <head>.

Media queries

Media queries lar deg bruke forskjellige CSS-regler basert på skjermstørrelsen:

/* Denne regelen gjelder bare for skjermer under 768px */
@media (max-width: 768px) {
    .meny {
        flex-direction: column;
    }
}

Vanlige breakpoints

Breakpoint Enhet
480px Små mobiler
768px Nettbrett
1024px Små skjermer / nettbrett i landskapsmodus
1200px Desktop

Mobile-first

Det finnes to tilnærminger til responsivt design:

Mobile-first: Du skriver CSS for mobil først, og legger til regler for større skjermer:

/* Standard (mobil) */
.container {
    flex-direction: column;
}

/* Nettbrett og større */
@media (min-width: 768px) {
    .container {
        flex-direction: row;
    }
}

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

Desktop-first: Du skriver CSS for desktop først, og legger til regler for mindre skjermer:

/* Standard (desktop) */
.container {
    flex-direction: row;
    max-width: 1200px;
}

/* Nettbrett */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}

Hvorfor mobile-first?

Mobile-first (min-width) er anbefalt fordi det tvinger deg til å tenke på det viktigste innholdet først. Det er lettere å legge til kompleksitet enn å fjerne den.

Praktiske eksempler

.nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nav a {
    padding: 10px;
    text-decoration: none;
}

/* Vannrett meny på større skjermer */
@media (min-width: 768px) {
    .nav {
        flex-direction: row;
    }
}

Se Display og Flexbox for mer om layout.

Et rutenett med Flexbox som tilpasser seg:

.rutenett {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.kort {
    width: 100%;  /* Mobil: ett kort per rad */
}

@media (min-width: 768px) {
    .kort {
        width: calc(50% - 8px);  /* Nettbrett: to per rad */
    }
}

@media (min-width: 1024px) {
    .kort {
        width: calc(33.33% - 11px);  /* Desktop: tre per rad */
    }
}

/* Skjul på mobil */
.bare-desktop {
    display: none;
}

@media (min-width: 768px) {
    .bare-desktop {
        display: block;
    }
}

/* Skjul på desktop */
@media (min-width: 768px) {
    .bare-mobil {
        display: none;
    }
}

h1 {
    font-size: 1.5rem;  /* Mobil */
}

@media (min-width: 768px) {
    h1 {
        font-size: 2rem;  /* Nettbrett */
    }
}

@media (min-width: 1024px) {
    h1 {
        font-size: 2.5rem;  /* Desktop */
    }
}

Responsive enheter

Enhet Beskrivelse
% Prosent av foreldreelementet
vw Prosent av vinduets bredde (100vw = full bredde)
vh Prosent av vinduets høyde (100vh = full høyde)
rem Relativt til rot-fontstørrelsen (vanligvis 16px)
em Relativt til foreldreelementets fontstørrelse 
.container {
    width: 90%;          /* 90% av forelderen */
    max-width: 1200px;   /* Aldri bredere enn 1200px */
    margin: 0 auto;      /* Sentrert */
}

h1 {
    font-size: 2rem;     /* 32px (2 × 16px) */
}

Tip

Bruk rem for fontstørrelser og % for bredder. Unngå faste px-verdier for ting som skal tilpasse seg.

Bilder

Bilder kan bli bredere enn skjermen på mobil. Bruk dette mønsteret:

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

Dette sørger for at bildet aldri blir bredere enn foreldreelementet, og at høyden skalerer proporsjonalt.

Teste responsivt design

Du kan teste responsivt design i nettleseren med utviklerverktøyene:

  1. Åpne DevTools (F12 eller høyreklikk → Inspiser)
  2. Klikk på enhetsverktøy-ikonet (mobilikon øverst til venstre i DevTools)
  3. Velg en enhet eller dra for å endre størrelsen

Tip

Du kan også endre nettleservinduets størrelse manuelt for å se hvordan layouten tilpasser seg.

Oppsummering

Konsept Beskrivelse
<meta name="viewport"> Nødvendig for responsivt design på mobil
@media (min-width: ...) Mobile-first media query
@media (max-width: ...) Desktop-first media query
%, vw, vh, rem Responsive enheter
max-width: 100% Hindrer bilder fra å flyte over
flex-wrap: wrap Lar flex-elementer bryte til ny rad