Hopp til innhold
Aksel

Søk

Ctrl+K for å søkeEsc for å lukke

Aksel

Designsystemet
God praksisBloggen

Grunnleggende

Brekkpunkter

StabilOppdatert 30. april 2025

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

Tips

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
Desktop1280px@media (min-width: 1280px)Mobile first
Desktop1279px@media (max-width: 1279px)Desktop first
Desktop1440px@media (min-width: 1440px)Mobile first
Desktop1439px@media (max-width: 1439px)Desktop first

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

CSS
@media (min-width: 480px)
@media (min-width: 768px)
@media (min-width: 1024px)
@media (min-width: 1280px)

Desktop-first

CSS
@media (max-width: 479px)
@media (max-width: 767px)
@media (max-width: 1023px)
@media (max-width: 1279px)

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.

CSS
// Bare for md-breakpoint
@media (min-width: 480px) and (max-width: 767px)

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.

CSS
@use '@navikt/ds-tokens/dist/tokens' as *;
@media (min-width: $a-breakpoint-sm)
@media (min-width: $a-breakpoint-md)
@media (min-width: $a-breakpoint-lg)
@media (min-width: $a-breakpoint-xl)