Vistas para Tablet y Escritorio

Este documento detalla cómo la aplicación web Crónicas de Mérida adapta su estilo y diseño para tamaños de pantalla de tablet y escritorio. Para información sobre adaptaciones móviles, consulta la sección de Vista Móvil.

Puntos de Ruptura de Diseño Responsive

La aplicación implementa un sistema de diseño responsive utilizando media queries de CSS para adaptar la interfaz de usuario a diferentes tamaños de pantalla. Las vistas de tablet y escritorio se definen por los siguientes puntos de ruptura:

• Tablet: 768px a 991.98px
• Escritorio: 992px a 1199.98px

Implementación de Media Queries en CSS

La aplicación implementa media queries específicas para dirigirse a diferentes tamaños de pantalla:

• Tablet: src/www/styles/style_tablet.css
• Escritorio: src/www/styles/style_escritorio.css

Vista Tablet (768px a 991.98px)

Para pantallas de tamaño tablet, la aplicación implementa varios cambios clave en el diseño y estilo para optimizar la experiencia del usuario.

Selectores y Propiedades CSS

A continuación se muestran los principales selectores y propiedades CSS definidos para la vista tablet:

• Estilo del Banner:

  .banner__text {
      font-size: 3em;
  }
  

• Diseño de la Cuadrícula del Contenedor de Eventos:

  .container__event {
      grid-template-columns: repeat(2, 1fr);
  }
  

• Diseño de Botones en Formularios:

  .form-card__left .button_container {
      display: flex;
      flex-direction: column;
      gap: 10px;
  }
  
  form-card__left .button_container {
      flex-direction: column;
  }
  

Vista Escritorio (992px a 1199.98px)

Para pantallas de escritorio, la aplicación realiza adaptaciones adicionales para aprovechar el mayor espacio disponible en pantalla.

Selectores y Propiedades CSS

• Estilo del Banner:

  .banner__text {
      font-size: 4em;
  }
  

Cambios en Componentes de Diseño Responsive

• .banner__text:

  • Tablet: font-size: 3em
  • Escritorio: font-size: 4em

• .container__event:

  • Tablet: grid-template-columns: repeat(2, 1fr)
  • Escritorio: grid-template-columns: repeat(3, 1fr) (asumido)

• .form-card__left .button_container:

  • Tablet: flex-direction: column
  • Escritorio: flex-direction: row (asumido)

Comparación de Componentes a través de Puntos de Ruptura

Selector CSS	Tablet (768px-991.98px)	Escritorio (992px-1199.98px)
.banner__text	font-size: 3em	font-size: 4em
.container__event	grid-template-columns: repeat(2, 1fr)	grid-template-columns: repeat(3, 1fr)
.form-card__left .button_container	flex-direction: column	flex-direction: row