Introducción

Las Media Queries (@media) cambian estilos según el viewport. CSS Container Queries (@container) permiten estilar componentes según el ancho de su contenedor padre, ideal para componentes reutilizables.

Viewport vs Container

Media queries dependen del ancho de la ventana. Container queries dependen del contenedor padre inmediato, permitiendo que un mismo componente se adapte a diferentes contextos.

Configuración básica

1. Registrar el padre con container-type: inline-size 2. Escribir reglas con @container (min-width: 400px)

.card-wrapper { container-type: inline-size; }
@container (min-width: 400px) { .my-card { flex-direction: row; } }

Unidades de container query

cqw (1% del ancho), cqh (1% del alto), cqmin, cqmax. Útiles para tipografía dinámica: font-size: clamp(1rem, 5cqw, 2rem).

Soporte

Compatible con Chrome, Safari, Edge y Firefox. Reduce la dependencia de media queries complejas y permite construir componentes verdaderamente reutilizables.