📱 Responsividade

Design responsivo é a abordagem que permite que interfaces se adaptem a diferentes tamanhos de tela e dispositivos. Em dashboards, isso é crucial pois usuários acessam de desktops, tablets e smartphones.

<!-- OBRIGATÓRIO para responsividade -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Mobile-first é a estratégia de começar o design pela menor tela e progressivamente adicionar complexidade. É a abordagem recomendada por melhor performance e experiência em dispositivos móveis.

/* Base: Mobile */
.card {
  width: 100%;
  padding: 1rem;
}

/* Tablet: adiciona estilos */
@media (min-width: 768px) {
  .card {
    width: 50%;
  }
}

/* Desktop: mais estilos */
@media (min-width: 1024px) {
  .card {
    width: 33.33%;
    padding: 2rem;
  }
}

/* Base: Desktop */
.card {
  width: 33.33%;
  padding: 2rem;
}

/* Tablet: remove estilos */
@media (max-width: 1023px) {
  .card {
    width: 50%;
  }
}

/* Mobile: mais remoções */
@media (max-width: 767px) {
  .card {
    width: 100%;
    padding: 1rem;
  }
}

<!-- Mobile: 1 coluna, Tablet: 2 colunas, Desktop: 3 colunas -->
<div class="
  grid
  grid-cols-1      {/* Mobile: padrão */}
  md:grid-cols-2   {/* 768px+ */}
  lg:grid-cols-3   {/* 1024px+ */}
  gap-4
">
  <div class="
    p-4            {/* Mobile */}
    md:p-6         {/* Tablet+ */}
    lg:p-8         {/* Desktop+ */}
  ">
    Card
  </div>
</div>

Breakpoints são pontos de largura onde o layout muda significativamente. Escolher breakpoints adequados é crucial para uma experiência consistente em diferentes dispositivos.

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'mobile': '480px',
      'tablet': '768px',
      'laptop': '1024px',
      'desktop': '1280px',
      'wide': '1536px',
    },
  },
}

// Uso em HTML
<div class="tablet:grid-cols-2 desktop:grid-cols-4">

Container Queries são uma evolução das media queries. Ao invés de responder ao viewport, componentes respondem ao tamanho do seu container pai - perfeito para componentes reutilizáveis em dashboards.

<!-- Container com query -->
<div class="@container">

  <!-- Componente que responde ao container -->
  <div class="
    flex flex-col              {/* Padrão: coluna */}
    @md:flex-row               {/* Container 28rem+: linha */}
    @lg:grid @lg:grid-cols-3  {/* Container 32rem+: grid */}
  ">
    <div>Card 1</div>
    <div>Card 2</div>
    <div>Card 3</div>
  </div>

</div>

/* Breakpoints de Container Query no Tailwind */
@xs  =  20rem (320px)
@sm  =  24rem (384px)
@md  =  28rem (448px)
@lg  =  32rem (512px)
@xl  =  36rem (576px)
@2xl =  42rem (672px)

Dashboards têm desafios únicos de responsividade devido à densidade de informação. Estratégias específicas são necessárias para manter a usabilidade em todas as telas sem perder dados importantes.

<!-- KPI menos importante: oculto em mobile -->
<div class="hidden md:block">
  KPI Secundário
</div>

<!-- KPI crítico: sempre visível -->
<div class="block">
  KPI Principal
</div>

Testar responsividade vai além de redimensionar a janela do navegador. Existem ferramentas e técnicas específicas para garantir que seu dashboard funcione em todos os cenários.