Brekkpunkter

Brekkpunkter er definerte skjermbredder der layouten endrer seg for å tilpasse seg ulike skjermstørrelser. Dette kan for eksempel være å endre antall kolonner i et grid, endre størrelsen på tekst og bilder, eller skjule/vise bestemte elementer på siden.

Figma

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.

xs

320 px

sm

480 px

md

768 px

lg

1024 px

xl

1280 px

2xl

1440 px

Kode

Bruk i media-queries

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

Mobile-first

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

Desktop-first

@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.

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

Variabler i media-queries

CSS custom properties støtter ikke bruk av variabler i media-queries, men i SCSS fungerer dette. SCSS-variablene importeres fra @navikt/ds-tokens.

@use '@navikt/ds-tokens/scss' as *;

@media (min-width: $ax-breakpoint-sm)
@media (min-width: $ax-breakpoint-md)
@media (min-width: $ax-breakpoint-lg)
@media (min-width: $ax-breakpoint-xl)