# Responsividad: una UI para todas las pantallas

> Pantallas que se adaptan solas a tamaño, densidad, escala de fuente y orientación — sin media queries.

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

# Responsividad: una UI para todas las pantallas

En CrossFly, la responsividad **no es una función aparte** — es consecuencia de medir por relaciones. Si
sigues los principios de abajo, la pantalla se readapta a tamaño, densidad (DPI), escala de fuente y
orientación **sin media queries y sin recalcular a mano**. Esta página es el recorte orientado a tarea del
Capítulo 36; el "porqué" está en
[Layout y el modelo Relative](/docs/concepts/the-layout-and-relative-model).

## Los 5 principios
1. **Nunca posiciones en píxeles fijos.** Usa fracciones, `Relative` y `LAY_FILL`/`LAY_AUTO`.
2. **Deja que el layout mida.** `LAY_AUTO`/`Relative.AUTO`/`RelSize.AUTOSIZE` reportan el tamaño natural.
3. **El espaciado también escala.** `ingap`/`outgap` vía `Gap.ofFont(...)`, nunca píxeles.
4. **Un área elástica por eje.** Marca **un** componente con `LAY_FILL` para absorber el sobrante.
5. **El resize es automático** — si hiciste lo anterior. Solo el `setBounds` manual exige código.

## La caja de herramientas
| Herramienta | Cuándo |
|---|---|
| `Relative.ofFont(x)` | tamaños que deben escalar con la fuente/DPI (incorpora densidad y zoom) |
| `Relative.ofScreen(x[, ScreenSize.MIN])` | fracción de la pantalla; `MIN` = se adapta a portrait/landscape |
| `LAY_FILL` / `LAY_AUTO` / fracción | dividir el container |
| `Gap.ofFont(...)` | padding/margen que escalan |
| `Screen.minSize` | **breakpoint** estable entre orientaciones |

## Breakpoints con `Screen.minSize`
Usa el **lado menor** (`Screen.minSize`), no `width` — es estable cuando el dispositivo gira:
```java
boolean tablet = Screen.minSize >= 600;   // decide 1 vs 2 columnas, por ejemplo
```

## Cuándo (raramente) cambiar el arreglo: `onReposition()`
Si el layout debe **cambiar de estructura** por orientación, sobrescribe `Window.onReposition()`:
```java
@Override protected void onReposition() throws Exception {
   painel.removeAll();
   if (Screen.isLandscape) {                     // 2 columnas
      painel.setLayout(new HorizontalLayout());
      painel.add(0.5f, lista); painel.add(0.5f, detalhe);
   } else {                                       // 1 columna
      painel.setLayout(new VerticalLayout());
      painel.add(LAY_FILL, lista); painel.add(LAY_AUTO, detalhe);
   }
}
```

## Checklist de responsividad
- [ ] Cero `ofPixels`/`setBounds` fijos (salvo excepción justificada).
- [ ] Exactamente **un** `LAY_FILL` por eje elástico.
- [ ] Espaciados con `Gap.ofFont`/`ofScreen`.
- [ ] Cuadrados/íconos con `ofScreen(v, ScreenSize.MIN)`.
- [ ] Breakpoints con `Screen.minSize`.

## Anti-patrones
| Anti-patrón | Corrección |
|---|---|
| `setBounds(0,0,300,48)` | `LAY_AUTO`/`Relative.ofFont` |
| `Gap.ofPixels(16)` fijo | `Gap.ofFont(1f)` |
| breakpoint por `Screen.width` | `Screen.minSize` |
| dos `LAY_FILL` en el mismo eje | uno solo |

## Ver también
- Fuente canónica: Capítulo 36 · Concepto: [Layout y Relative](/docs/concepts/the-layout-and-relative-model)
- [Layouts](/docs/ui/layouts) · [Responsividad (ui)](/docs/ui/layouts/responsiveness)