# Responsiveness: one UI for every screen

> Screens that adapt on their own to size, density, font scale, and orientation — without media queries.

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

# Responsiveness: one UI for every screen

In CrossFly, responsiveness **is not a separate feature** — it's a consequence of measuring by
relationships. If you follow the principles below, the screen re-adapts to size, density (DPI), font
scale, and orientation **without media queries and without recalculating by hand**. This page is the
task-oriented cut of Chapter 36; the "why" is in
[Layout and the Relative model](/docs/concepts/the-layout-and-relative-model).

## The 5 principles
1. **Never position in fixed pixels.** Use fractions, `Relative`, and `LAY_FILL`/`LAY_AUTO`.
2. **Let the layout measure.** `LAY_AUTO`/`Relative.AUTO`/`RelSize.AUTOSIZE` report the natural size.
3. **Spacing scales too.** `ingap`/`outgap` via `Gap.ofFont(...)`, never pixels.
4. **One elastic area per axis.** Mark **one** component with `LAY_FILL` to absorb the slack.
5. **Resize is automatic** — if you did the above. Only manual `setBounds` requires code.

## The toolbox
| Tool | When |
|---|---|
| `Relative.ofFont(x)` | sizes that should scale with font/DPI (embeds density and zoom) |
| `Relative.ofScreen(x[, ScreenSize.MIN])` | fraction of the screen; `MIN` = adapts to portrait/landscape |
| `LAY_FILL` / `LAY_AUTO` / fraction | dividing up the container |
| `Gap.ofFont(...)` | padding/margin that scale |
| `Screen.minSize` | stable **breakpoint** across orientations |

## Breakpoints with `Screen.minSize`
Use the **shorter side** (`Screen.minSize`), not `width` — it's stable when the device rotates:
```java
boolean tablet = Screen.minSize >= 600;   // decides 1 vs 2 columns, for example
```

## When (rarely) to change the arrangement: `onReposition()`
If the layout must **change structure** by orientation, override `Window.onReposition()`:
```java
@Override protected void onReposition() throws Exception {
   painel.removeAll();
   if (Screen.isLandscape) {                     // 2 columns
      painel.setLayout(new HorizontalLayout());
      painel.add(0.5f, lista); painel.add(0.5f, detalhe);
   } else {                                       // 1 column
      painel.setLayout(new VerticalLayout());
      painel.add(LAY_FILL, lista); painel.add(LAY_AUTO, detalhe);
   }
}
```

## Responsiveness checklist
- [ ] Zero fixed `ofPixels`/`setBounds` (barring a justified exception).
- [ ] Exactly **one** `LAY_FILL` per elastic axis.
- [ ] Spacing with `Gap.ofFont`/`ofScreen`.
- [ ] Squares/icons with `ofScreen(v, ScreenSize.MIN)`.
- [ ] Breakpoints with `Screen.minSize`.

## Anti-patterns
| Anti-pattern | Fix |
|---|---|
| `setBounds(0,0,300,48)` | `LAY_AUTO`/`Relative.ofFont` |
| fixed `Gap.ofPixels(16)` | `Gap.ofFont(1f)` |
| breakpoint by `Screen.width` | `Screen.minSize` |
| two `LAY_FILL` on the same axis | just one |

## See also
- Canonical source: Chapter 36 · Concept: [Layout and Relative](/docs/concepts/the-layout-and-relative-model)
- [Layouts](/docs/ui/layouts) · [Responsiveness (ui)](/docs/ui/layouts/responsiveness)