Diseño responsivo
Adaptar la estructura sin comprimir tipografía, datos ni extremos del pill.
Diseñar desde el contenido y comprobar al menos 320 px, 390 px, tablet y desktop, con zoom 200 %. No usar overflow oculto para encubrir acciones inaccesibles.
| Breakpoint | Valor | Uso inicial |
|---|---|---|
| sm | 640 px | Composición apilada |
| md | 768 px | Dos columnas cuando el contenido lo permite |
| lg | 1024 px | Sidebar visible |
| xl | 1280 px | Composición amplia |
Las variables de breakpoint documentan valores; custom properties no funcionan como condiciones de media queries. Usar sus valores desde el build o un adaptador.
Texto: 65–75ch. Inputs: 16 px. Targets: 44 × 44 px. Botones con etiquetas completas y padding geométrico intacto; permitir wrap del grupo. Las tablas y gráficos densos pueden desplazarse dentro de una región accesible con nombre, nunca desbordar la página.
Marketing usa escala fluida; app y transaccional mantienen rem. Una hero pierde columnas antes de reducir el titular hasta parecer una etiqueta. Los detalles y CTA de artes sociales se evalúan al tamaño real de publicación, no solo en el lienzo de edición.
Los overlays deben conservar contenido visible, cierre, teclado y foco. Una hoja móvil es una opción según tarea, no una conversión obligatoria de cada modal.