Pular para o conteúdo principal

Breakpoints​

Breakpoints

Os breakpoints são valores predefinidos de largura de tela (screen width) que definem como o layout se adapta a diferentes dispositivos, permitindo um design responsivo.
No Chakra, esses breakpoints estão associados aos seguintes tamanhos:

📱 Extra Small Devices (base)​

  • Range: 0px – 479px
  • Exemplo: celulares

📲 Small Devices (sm)​

  • Range: 480px – 767px
  • Exemplo: tablets

💻 Medium Devices (md)​

  • Range: 768px – 991px
  • Exemplo: notebooks menores, desktops compactos

🖥️ Large Devices (lg)​

  • Range: 992px – 1279px
  • Exemplo: notebooks médios e alguns desktops

🖥️ Extra Large Devices (xl)​

  • Range: 1280px – 1535px
  • Exemplo: notebooks grandes e desktops

🖥️ Extra Extra Large Devices (2xl)​

  • Range: 1536px ou maior
  • Exemplo: desktops maiores, monitores ultra-wide e telas de alta resolução

Width​

Os tokens de width padronizam valores de largura que podem ser aplicados a componentes, garantindo consistência entre layouts.

Height​

Os tokens de height padronizam valores de altura que podem ser aplicados a componentes.