Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Blogg
    • Kom i gang med kodepakkene
    • Kom i gang med Figma
    • Samarbeid og bidrag
    • Versjonering i Figma
    • Design tokens
    • Farger
    • Brekkpunkter
    • Typografi
    • Endringslogg
    • Migrering
    • CSS import
    • Kommandolinje
    • Stylelint
    • Tailwind
    • OverridableComponent
Grunnleggende / Styling

Brekkpunkter

Oppdatert 7. september 2023Ny

    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

    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

    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.

    tipsTips

    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

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

    © 2023 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