Introducción al diseño adaptable (media queries)

En esta lección harás que la página cambie de aspecto según el ancho de la pantalla, que es la base de que un sitio se vea bien tanto en móvil como en ordenador.

Una media query se escribe @media (condición) { ... } y las reglas de dentro solo se aplican cuando la condición se cumple. max-width: 400px significa «cuando el ancho sea de 400px o menos», es decir, pantallas pequeñas. También existe min-width, que funciona al revés.

En el código de ejemplo la tarjeta es verde por defecto y pasa a rosa cuando el ancho baja de 400px. Cambia el tamaño de la ventana de vista previa y observa el momento exacto en el que cambia el color.

El error habitual es escribir las reglas en un orden que se pisa a sí mismo. En CSS, ante la misma especificidad, gana la última regla: si pones el @media antes de la regla general, esta lo sobrescribirá y parecerá que la media query «no funciona».

En el desarrollo real se trabaja con el enfoque mobile first: se escribe primero el diseño para móvil y se van añadiendo ajustes para pantallas mayores con min-width. Como más de la mitad del tráfico web es móvil, esto ya no es opcional.