Responsive multifunción · v9.2
El mismo panel, en cuatro contenedores.
Mismo HTML, mismas clases, mismo CSS. Ningún objeto sabe el ancho del monitor: cada uno consulta el ancho del sitio donde vive. Un gráfico en un drawer de 320 px no se comporta como uno a página completa.
320 px · drawer
480 px · sidebar
768 px · columna
ancho completo
Drawer
320 px--ancho: 20rem
Usuarios18 420+6,2 %
Sesiones92 138+3,4 %
Conversión4,8 %sin cambios
Tiempo6m 12s−0,4 %
Sesiones por díaÚltima semana
Revisar copys
Medir contraste
Maquetar hero
Redactar brief
| Entrega | Estado | Horas |
|---|---|---|
| Informe | Listo | 32 |
| Panel | En curso | 18 |
Todo cabe. La tabla se apila, el kanban se queda en filas y el gráfico reduce su altura.
Sidebar
480 px--ancho: 30rem
Usuarios18 420+6,2 %
Sesiones92 138+3,4 %
Sesiones por díaÚltima semana
Revisar copys
Medir contraste
Maquetar hero
Redactar brief
Columna de contenido
768 px--ancho: 48rem
Usuarios18 420+6,2 %
Sesiones92 138+3,4 %
Conversión4,8 %sin cambios
Tiempo6m 12s−0,4 %
Sesiones por díaÚltima semana
Revisar copys
Maquetar hero
Redactar brief
| Entrega | Responsable | Estado | Horas |
|---|---|---|---|
| Informe | Ana | Listo | 32 |
| Panel | Luis | En curso | 18 |
| Auditoría | Marta | Bloqueado | 6 |
Página completa
ancho completo--ancho: 100%
Usuarios activos18 420+6,2 % este mes
Sesiones92 138+3,4 %
Conversión4,8 %sin cambios
Tiempo medio6m 12s−0,4 %
Sesiones por díaÚltima semana
Revisar copys
Medir contraste
Maquetar hero
Redactar brief
| Entrega | Responsable | Estado | Horas | Avance |
|---|---|---|---|---|
| Informe ejecutivo | Ana | Listo | 32 | 100 % |
| Panel de indicadores | Luis | En curso | 18 | 62 % |
| Auditoría de accesibilidad | Marta | Bloqueado | 6 | 12 % |
Cómo se prueba: los cuatro marcos tienen el mismo HTML y las mismas clases. Lo único que cambia es el ancho del contenedor. Si el panel se adapta en los cuatro, el sistema es multifunción; si no, el fallo es del CSS, no del ejemplo.