¿Cómo funcionan las consultas de medios en el contexto de las aplicaciones móviles?

Las consultas de medios en el contexto de aplicaciones móviles no se utilizan directamente para estilizar componentes de interfaz de usuario nativos. Forman parte de CSS y se aplican para el diseño adaptable del contenido web que se muestra dentro de WebView o en un navegador en un dispositivo móvil.

Principio de funcionamiento en el contexto móvil (para contenido web en WebView/navegador):

1. La página web se carga en WebView o en un navegador móvil.
2. El navegador/WebView determina las características del dispositivo o la ventana de visualización:
   • Ancho y alto de la pantalla (width, height, min-width, max-height, etc.)
   • Orientación (orientation: portrait o landscape)
   • Resolución (resolution)
   • Tipo de dispositivo (media type, por ejemplo, screen)
   • Otras características (por ejemplo, prefers-color-scheme).
3. El analizador CSS analiza los estilos, incluyendo las consultas de medios.
4. Las reglas CSS dentro de los bloques @media solo se aplican si las condiciones de la consulta de medios coinciden con las características actuales del dispositivo/ventana.

Ejemplo de uso:

/* Estilos básicos para todos los tamaños */
.container {
  width: 90%;
  margin: 0 auto;
}

/* Se aplica en pantallas con un ancho hasta 768px (típico para móviles/tabletas) */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 15px;
  }

  .header {
    flex-direction: column; /* Ejemplo de cambio de diseño */
  }
}

/* Se aplica en pantallas con un ancho desde 769px (típico para tablets/desktops) */
@media (min-width: 769px) {
  .sidebar {
    display: block; /* Mostrar barra lateral en pantallas grandes */
  }
}

/* Se aplica en orientación apaisada */
@media (orientation: landscape) {
  .some-element {
    font-size: 1.2em;
  }
}

En aplicaciones móviles nativas, la adaptabilidad se logra mediante otros mecanismos:

• Frameworks de UI nativos: (por ejemplo, Auto Layout en iOS, ConstraintLayout en Android) permiten describir relaciones entre elementos de UI que se adaptan al tamaño y orientación de la pantalla.
• Tamaños de dispositivos y densidad de píxeles: Los desarrolladores utilizan diferentes recursos (por ejemplo, recursos drawables en Android, assets en iOS) para distintas resoluciones y densidades de pantalla.
• Código: Cambio dinámico de la disposición y tamaño de los elementos en función de las propiedades del dispositivo, obtenidas programáticamente.

Por lo tanto, las consultas de medios son importantes para WebViews y Aplicaciones web progresivas (PWA) que funcionan en un entorno de navegador móvil, pero no son la base de la adaptabilidad en aplicaciones móviles nativas puras.