Las media queries son uno de los pilares del diseño responsivo, permitiendo que los estilos de un sitio web se adapten según el tamaño de la pantalla, la resolución y otros factores del dispositivo. En este capítulo, profundizaremos en el uso avanzado de media queries para tener un control más preciso sobre el diseño, explorando aspectos como la orientación de la pantalla, las resoluciones de alta densidad, y cómo implementar breakpoints fluidos.

Media Queries en responsive design

Recordatorio: ¿Qué son las Media Queries?

Las media queries permiten aplicar estilos CSS basados en ciertas características del dispositivo o la ventana del navegador. Generalmente, las media queries responden a las dimensiones del viewport, ajustando el diseño en función del ancho de la pantalla.

css

Media Queries por Orientación de Pantalla

Además del ancho de la pantalla, puedes utilizar media queries para aplicar estilos basados en la orientación del dispositivo, es decir, si la pantalla está en modo vertical (portrait) o en modo horizontal (landscape).

css

Uso Combinado de Ancho y Orientación

Es posible combinar media queries para aplicar estilos más específicos que tengan en cuenta tanto el tamaño de la pantalla como su orientación.

css

Media Queries para Densidad de Píxeles (Resoluciones Retina)

Para dispositivos con pantallas de alta densidad de píxeles, como los iPhones y otros teléfonos con pantallas Retina, se pueden utilizar media queries específicas que permiten adaptar imágenes y otros elementos gráficos para que se vean nítidos.

css

Alternativamente, se puede usar -webkit-min-device-pixel-ratio para navegadores WebKit:

css

Media Queries por Aspect Ratio

El aspect ratio (relación de aspecto) de una pantalla o ventana es otro criterio que puedes usar en media queries. Esto es especialmente útil para ajustar el diseño en pantallas con proporciones no estándar, como algunos dispositivos móviles o televisores.

css

También puedes usar max-aspect-ratio o min-aspect-ratio para manejar relaciones de aspecto mínimas o máximas.

css

Media Queries para el Modo de Color

Con el aumento de la popularidad del modo oscuro, las media queries pueden detectar la preferencia del usuario por un esquema de color claro u oscuro, permitiéndote ajustar los estilos en consecuencia.

css

Del mismo modo, puedes aplicar estilos específicos para el modo claro:

css

Breakpoints Fluídos con clamp()

En lugar de utilizar media queries fijas, la función clamp() permite crear breakpoints fluidos, que ajustan las propiedades CSS de manera progresiva entre un rango de valores. Esto es útil para el escalado de elementos como fuentes y márgenes.

css

En este ejemplo, el tamaño de la fuente se ajusta entre 1.5rem y 3rem, con un tamaño dinámico en función del 5vw (5% del ancho del viewport).

Ejemplo Completo de Media Queries Avanzadas

A continuación, un ejemplo que combina varias de las técnicas avanzadas de media queries para un control más preciso del diseño:

html

Conclusión

Las media queries avanzadas permiten tener un control mucho más preciso sobre el diseño en diferentes dispositivos y condiciones de visualización. Desde la orientación de pantalla hasta las preferencias de modo oscuro, estas herramientas mejoran la flexibilidad y adaptabilidad del diseño web.