# Responsividade: uma UI para todas as telas

> Telas que se adaptam sozinhas a tamanho, densidade, escala de fonte e orientação — sem media queries.

Source: https://crossfly.dev/pt/docs/best-practices/responsividade — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# Responsividade: uma UI para todas as telas

No CrossFly, responsividade **não é um recurso à parte** — é consequência de medir por relações. Se
você seguir os princípios abaixo, a tela se readapta a tamanho, densidade (DPI), escala de fonte e
orientação **sem media queries e sem recalcular à mão**. Esta página é o recorte orientado a tarefa do
Capítulo 36; o "porquê" está em
[Layout e o modelo Relative](/docs/concepts/the-layout-and-relative-model).

## Os 5 princípios
1. **Nunca posicione em pixels fixos.** Use frações, `Relative` e `LAY_FILL`/`LAY_AUTO`.
2. **Deixe o layout medir.** `LAY_AUTO`/`Relative.AUTO`/`RelSize.AUTOSIZE` reportam o tamanho natural.
3. **Espaçamento também escala.** `ingap`/`outgap` via `Gap.ofFont(...)`, nunca pixels.
4. **Uma área elástica por eixo.** Marque **um** componente com `LAY_FILL` para absorver a sobra.
5. **Resize é automático** — se você fez o acima. Só `setBounds` manual exige código.

## A caixa de ferramentas
| Ferramenta | Quando |
|---|---|
| `Relative.ofFont(x)` | tamanhos que devem escalar com a fonte/DPI (embute densidade e zoom) |
| `Relative.ofScreen(x[, ScreenSize.MIN])` | fração da tela; `MIN` = adapta a portrait/landscape |
| `LAY_FILL` / `LAY_AUTO` / fração | dividir o container |
| `Gap.ofFont(...)` | padding/margem que escalam |
| `Screen.minSize` | **breakpoint** estável entre orientações |

## Breakpoints com `Screen.minSize`
Use o **menor lado** (`Screen.minSize`), não `width` — ele é estável quando o aparelho gira:
```java
boolean tablet = Screen.minSize >= 600;   // decide 1 vs 2 colunas, por exemplo
```

## Quando (raramente) mudar o arranjo: `onReposition()`
Se o layout deve **mudar de estrutura** por orientação, sobrescreva `Window.onReposition()`:
```java
@Override protected void onReposition() throws Exception {
   painel.removeAll();
   if (Screen.isLandscape) {                     // 2 colunas
      painel.setLayout(new HorizontalLayout());
      painel.add(0.5f, lista); painel.add(0.5f, detalhe);
   } else {                                       // 1 coluna
      painel.setLayout(new VerticalLayout());
      painel.add(LAY_FILL, lista); painel.add(LAY_AUTO, detalhe);
   }
}
```

## Checklist de responsividade
- [ ] Zero `ofPixels`/`setBounds` fixos (salvo exceção justificada).
- [ ] Exatamente **um** `LAY_FILL` por eixo elástico.
- [ ] Espaçamentos com `Gap.ofFont`/`ofScreen`.
- [ ] Quadrados/ícones com `ofScreen(v, ScreenSize.MIN)`.
- [ ] Breakpoints com `Screen.minSize`.

## Anti-padrões
| Anti-padrão | Correção |
|---|---|
| `setBounds(0,0,300,48)` | `LAY_AUTO`/`Relative.ofFont` |
| `Gap.ofPixels(16)` fixo | `Gap.ofFont(1f)` |
| breakpoint por `Screen.width` | `Screen.minSize` |
| dois `LAY_FILL` no mesmo eixo | um só |

## Veja também
- Fonte canônica: Capítulo 36 · Conceito: [Layout e Relative](/docs/concepts/the-layout-and-relative-model)
- [Layouts](/docs/ui/layouts) · [Responsividade (ui)](/docs/ui/layouts/responsiveness)