Brekkpunkter

Oppdatert 28. mai 2024Stabil

Brekkpunkter er spesifikke punkter på en nettside hvor layouten og innholdet reagerer på skjermbredden til bruker. Disse brekkpunktene definerer grensene for hvor 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.

Brekkpunkt	Bredde
xs	320 px
sm	480 px
md	768 px
lg	1024 px
xl	1280 px
2xl	1440 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

Verdi	Media queries	Bruk
0		Mobile first
480px	@media (min-width: 480px)	Mobile first
479px	@media (max-width: 479px)	Desktop first
768px	@media (min-width: 768px)	Mobile first
767px	@media (max-width: 767px)	Desktop first
1024px	@media (min-width: 1024px)	Mobile first
1023px	@media (max-width: 1023px)	Desktop first
1280px	@media (min-width: 1280px)	Mobile first
1279px	@media (max-width: 1279px)	Desktop first
1440px	@media (min-width: 1440px)	Mobile first
1439px	@media (max-width: 1439px)	Desktop first

Relevante lenker

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.