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.

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.