Diseño Responsive

Propósito y Alcance

Este documento detalla la implementación del diseño responsive en la aplicación Crónicas de Mérida. Cubre el sistema de puntos de ruptura (breakpoints), la organización de los archivos CSS y las adaptaciones de componentes que garantizan el correcto funcionamiento de la aplicación en todos los tamaños de dispositivos, desde teléfonos móviles hasta monitores de escritorio grandes.

Para información sobre componentes de diseño específicos y estilos base, consulta la sección de Diseño y Estilo.

Arquitectura del Diseño Responsive

El sistema de diseño responsive utiliza un enfoque "mobile-first" con media queries para adaptar la interfaz a diferentes tamaños de pantalla. La aplicación define cinco puntos de ruptura, cada uno con un archivo CSS dedicado que contiene estilos específicos para ese rango de dispositivos.

Sistema de Puntos de Ruptura

La aplicación implementa un sistema de puntos de ruptura similar al de Bootstrap con cinco categorías de tamaño de dispositivo:

Categoría de Dispositivo	Rango de Puntos de Ruptura	Archivo CSS
Teléfonos Extra Pequeños	max-width: 575.98px	style_telefono_extra_pequeno.css
Teléfonos Pequeños	576px - 767.98px	style_telefono_pequeno.css
Tablets	768px - 991.98px	style_tablet.css
Escritorio	992px - 1199.98px	style_escritorio.css
Escritorio Extra Grande	min-width: 1200px	style_escritorio_extra_grande.css

Adaptaciones de Componentes

La aplicación incluye adaptaciones responsive para varios componentes de la interfaz de usuario. A continuación, se detallan las principales adaptaciones:

Menú de Navegación

El menú de navegación se transforma significativamente entre las vistas de escritorio y móvil:

• Escritorio: Barra de menú horizontal con submenús desplegables.
• Móvil: Sistema de menú basado en toggle con elementos apilados verticalmente.

Adaptaciones clave en móviles incluyen:

1. Posicionamiento fijo en la parte superior de la ventana.
2. Botón de toggle para mostrar/ocultar elementos del menú.
3. Elementos del menú apilados verticalmente.
4. Submenús que se muestran como secciones expandibles en lugar de desplegables.

Diseños de Contenido

Las áreas de contenido principal se adaptan al tamaño de la pantalla con los siguientes ajustes:

1. Ajustes de padding para el área de contenido principal en pantallas pequeñas.
2. Escalado del tamaño del texto del banner según el tamaño del dispositivo.
3. Conversión de diseños de múltiples columnas a una sola columna en pantallas pequeñas.

El escalado del texto del banner demuestra una mejora progresiva:

Tamaño del Dispositivo	Tamaño del Texto del Banner
Teléfono Extra Pequeño	1em
Teléfono Pequeño	2.5em
Tablet	3em
Escritorio	4em

Formularios y Tarjetas

Los diseños de formularios se adaptan significativamente entre las vistas de móvil y escritorio:

1. En móviles, las tarjetas de formulario cambian de un diseño horizontal a uno vertical.
2. Los elementos de entrada se expanden al 100% del ancho en pantallas pequeñas.
3. Los contenedores de entrada de tiempo cambian de diseño horizontal a vertical.
4. Los contenedores de botones se apilan verticalmente en dispositivos móviles.