Curso de CSS
Dale estilo y vida a la web.
Aprende CSS con ejemplos interactivos y crea proyectos reales.
@media te permite aplicar reglas CSS solo cuando se cumple una condición, como un ancho máximo de pantalla — la base del diseño responsive.
Explicación
@media aplica un bloque de estilos solo bajo cierta condición:
@media (max-width: 640px)El bloque de estilos dentro solo se aplica cuando el ancho de la ventana es de 640px o menos.
@media (min-width: 1024px)Lo opuesto: aplica los estilos solo en pantallas de 1024px de ancho o más.
flex-direction: columnAquí se usa dentro del media query para apilar verticalmente las tarjetas en pantallas pequeñas.
Reto rápido
Agrega un segundo media query que cambie el color de fondo de las tarjetas en pantallas grandes.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
Puedes probar tus media queries sin cambiar de dispositivo: en las DevTools del navegador, activa el modo de diseño responsive (ícono de móvil/tablet).
Dato extra
Puedes combinar varias condiciones en un mismo media query, como @media (min-width: 640px) and (max-width: 1024px), para apuntar a un rango específico de pantallas.
Error común
Escribir estilos para pantallas grandes dentro de un media query pensado para pantallas chicas (o viceversa): siempre revisa si usaste min-width o max-width correctamente.
Siguiente paso
Ya sabes adaptar estilos según el tamaño de pantalla. Ahora veamos el orden recomendado para escribir esas reglas: mobile-first.
Ir a la siguiente lección