Diseño responsive desde el contenido.
Los breakpoints organizan el contenido, no representan dispositivos concretos. El HTML mantiene el mismo orden significativo.
Breakpoints de partida
| Nombre | Uso |
|---|---|
| base | 320 px y flujo de una columna |
| sm | controles y clusters con más espacio |
| md | navegación y split simples |
| lg | grillas y sidebars persistentes |
| xl | densidad de datos controlada |
Reglas
- Diseñar la versión base antes de agregar variantes.
- No esconder contenido esencial por viewport.
- Evitar reordenamiento visual distinto del DOM.
- Usar container queries para componentes autónomos, no como default.
- Probar texto largo, zoom y orientación.
Ejemplo
<div class="grid gap-4 md:grid-cols-[minmax(0,1fr)_18rem]">
<main>…</main><aside>…</aside>
</div>