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.
✨ Pregunta a Lara — tu compañera de estudio con IA
Desbloquea soporte de aprendizaje personalizado. Lara puede explicar lecciones, resumir temas y responder tus preguntas — disponible desde el plan Go y superiores.
Lara te ayuda a aprender más rápido — exclusivo para los miembros ReadyTools Go, Plus y Max.
