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.
Brekkpunktene
| Enhet | Verdi | Bruk | |
|---|---|---|---|
| 0 | Mobile first | ||
| 480px | Mobile first | ||
| 479px | Desktop first | ||
| 768px | Mobile first | ||
| 767px | Desktop first | ||
| 1024px | Mobile first | ||
| 1023px | Desktop first | ||
| 1280px | Mobile first | ||
| 1279px | Desktop first |
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 og antall kolonner en side har.
I Figma blir skissene satt opp med faste bredder. Det er viktig at du lager skisser med alle breddene (brekkpunktene) som produktet ditt bruker i kode.
På nav.no (åpne og innlogga sider) er mesteparten av besøkene med små skjermer. Derfor er det lurt å starte med skisser på nivå XS.
Kode
Relevante lenker
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.