Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Blogg
  • grunnleggende
      • Hva er Aksel?
      • Kom i gang med kodepakkene
      • Kom i gang med Figma
      • Har du innspill til Aksel?
      • Versjonering i Figma
      • Logo
      • Design tokens
      • Farger
      • Brekkpunkter
      • Typografi
      • Endringslogg
      • Migrering
      • CSS import
      • Kommandolinje
      • Stylelint
      • Tailwind
      • Layout primitives
      • Nextjs
      • OverridableComponent

Brekkpunkter

Oppdatert 30. april 2025Stabil

Innhold på siden

  • Design
  • Kode
    • Bruk i media-queries

Brekkpunkter er spesifikke bredder til en nettside hvor layouten og innholdet kan endre seg. Disse brekkpunktene definerer grensene for når designet skal justeres for å optimalisere brukeropplevelsen på ulike enheter og skjermstørrelser.

Brekkpunktene er mest brukt til å bestemme layoutendringer, som for eksempel å endre antall kolonner i et grid, endre størrelsen på tekst og bilder, eller skjule/vise bestemte elementer på siden. Brukeropplevelsen kan variere avhengig av enhet og skjermstørrelse, og brekkpunktene bidrar til en mer bedre og optimalisert opplevelse på tvers av disse.

Design

Som designer vil brekkpunkter la deg tilpasse designet til ulike skjermstørrelser og enheter. Overgangen fra et nivå til et annet gir deg muligheten til å endre på layout, størrelser, typografi og grafikk.

I Figma setter du opp skissene med faste bredder. Det er viktig at du lager skisser for alle breddene (brekkpunktene) som produktet ditt bruker i kode.

BrekkpunktBredde
xs320 px
sm480 px
md768 px
lg1024 px
xl1280 px
2xl1440 px

tipsTips

På nav.no (åpne og innlogga sider) er mesteparten av besøkene med små skjermer. Derfor er det lurt å starte med skisser på brekkpunktet xs.

Kode

EnhetVerdiMedia queriesBrukKopi
Mobile small0Mobile first
Mobile regular480px@media (min-width: 480px)Mobile first
Mobile regular479px@media (max-width: 479px)Desktop first
Tablet768px@media (min-width: 768px)Mobile first
Tablet767px@media (max-width: 767px)Desktop first
Laptop1024px@media (min-width: 1024px)Mobile first
Laptop1023px@media (max-width: 1023px)Desktop first
Dekstop1280px@media (min-width: 1280px)Mobile first
Dekstop1279px@media (max-width: 1279px)Desktop first
Dekstop1440px@media (min-width: 1440px)Mobile first
Dekstop1439px@media (max-width: 1439px)Desktop first

LenkerLenker

  • Breakpoint-tokens

Bruk i media-queries

Breakpoint-tokens kommer i 2 varianter: sm og sm-down. Down-versjon er ment for bruk i "dekstop-first" media-queries, og vanlig token i "mobile-first"

Mobile-first

Desktop-first

Spesifikke brekkpunkt

Noen ganger ønsker man å løse noe for et spesifikt brekkpunkt. Da kan man bruke en kombinasjon av min-width og max-width.

Variabler i media-queries

CSS custom properties støtter enda ikke bruk av variabler i media-queries, men for brukere av Scss fungerer dette. Man må også da importere Scss-variablene fra @navikt/ds-tokens direkte.

© 2025 Nav

Arbeids- og velferdsetaten

Snarveier

  • Skriv for Aksel
  • Prinsipper for brukeropplevelse
  • Security Playbook
  • Etterlevelse

Om nettstedet

  • Hva er Aksel?
  • Personvernerklæring
  • Tilgjengelighetserklæring

Finn oss

  • Figma
  • Github
  • Slack