Fundamento · 05

Breakpoints

Escala de breakpoints responsivos do design system.

Mapa de breakpoints

O design system define 5 breakpoints padrão. Todos os utilitários responsivos usam o sufixo @{breakpoint} (ex.: .hide@md, .flex@lg) baseado nesta escala.

Breakpoint	Valor (rem)	Equivalente (px)
`xs`	`32rem`	512px
`sm`	`48rem`	768px
`md`	`64rem`	1024px
`lg`	`80rem`	1280px
`xl`	`90rem`	1440px

Para customizar a escala, passe $breakpoints ao módulo config no seu style.scss:

@use 'config' as * with (
  $breakpoints: (
    'xs': '32rem',
    'sm': '48rem',
    'md': '64rem',
    'lg': '80rem',
    'xl': '90rem'
  )
);

Uso em media queries

O design system usa breakpoints no modelo mobile-first: min-width para ativar estilos a partir de um tamanho, e not all and (min-width) para ativar abaixo de um tamanho.

A partir de um breakpoint:

@media (min-width: 64rem) {
  /* a partir de 64rem */
}

Até (abaixo de) um breakpoint:

@media not all and (min-width: 64rem) {
  /* até 64rem */
}