CSS media queries

Las media queries permiten adaptar los estilos de la web al tamaño de pantalla, a las propiedades del dispositivo o a las preferencias del usuario. Son una técnica esencial del diseño responsivo que asegura una visualización óptima en distintos dispositivos.

Conceptos básicos

La sintaxis de una media query comienza con la palabra clave @media, seguida de una o más condiciones. Si la condición se cumple, se aplican las reglas CSS dentro. Las más comunes son min-width y max-width, que se refieren al ancho de la pantalla.

En este ejemplo se cambia el color de fondo cuando el ancho de la pantalla es menor a 600px.

Condiciones más avanzadas

Las media queries pueden incluir operadores lógicos como and, not y only. Por ejemplo, podemos combinar min-width y max-width para apuntar a un rango específico. Esto permite definir estilos para dispositivos concretos.

Condiciones frecuentes

Las media queries no solo evalúan el ancho o el alto. También se puede usar orientation para distinguir entre modo retrato y paisaje, o prefers-color-scheme para soportar modos claro y oscuro.

Condición	Uso
max-width	Apply styles up to a certain width
min-width	Apply styles from a certain width upwards
orientation	Target portrait or landscape devices
prefers-color-scheme	Adapt to dark or light mode preferences

Consejos para usar media queries

El uso correcto de las media queries es clave en el diseño responsivo. Aquí algunos consejos:

Aplica un enfoque mobile-first: diseña primero para pantallas pequeñas y amplía para tamaños mayores.
Usa breakpoints consistentes y bien documentados para facilitar el trabajo en equipo.
Ten en cuenta las preferencias del usuario, como el soporte de modo oscuro con prefers-color-scheme.