Cuando diseñas interfaces responsivas en CSS, elegir entre container queries y media queries cambia por completo la flexibilidad de tu código. Las media queries miden el viewport, mientras que las container queries miden el contenedor padre, lo que te permite componentizar estilos sin depender del tamaño total de la pantalla.

¿Qué hace diferente a un container query frente a un media query?

La diferencia central está en qué se mide. Un media query observa el ancho de la ventana completa del navegador, el viewport. Un container query observa el ancho del elemento padre que declaraste como contenedor.

Eso significa que un mismo componente puede verse distinto en dos lugares de tu web, aunque la pantalla sea la misma, porque cada uno responde a su contenedor. Y ahí está lo interesante: ganas modularidad real.

¿Qué es un container query? Es una regla CSS que aplica estilos según el tamaño del contenedor padre, no del viewport. Sirve para componentes que deben adaptarse a su espacio disponible.

¿Cómo se escribe un media query clásico para una tarjeta?

El ejemplo parte de un div con clase tarjeta, al que le damos borde, padding de 20, font-size de 16 píxeles y un ancho del 100% con un max-width de 600 píxeles para que conserve forma de tarjeta.

Luego declaras la regla así:

css @media (max-width: 600px) { .tarjeta { background-color: aquamarine; } }

Cuando el viewport baja de 600 píxeles, todas las tarjetas cambian a aquamarine. La condición depende del navegador completo, no del lugar donde vive la tarjeta.

¿Por qué a veces el viewport te engaña?

Porque un componente puede vivir dentro de una sidebar, un modal o una columna estrecha. El viewport puede ser grande, pero el espacio real del componente es chico. Ahí los media queries fallan en precisión.

¿Cómo se declara un container query paso a paso?

Primero defines el contenedor en CSS con la propiedad container-type. En el ejemplo se usa inline-size, que mide el ancho disponible.

css .contenedor { container-type: inline-size; width: 100%; max-width: 900px; border: 1px solid red; padding: 10px; }

Después escribes la consulta con @container apuntando al ancho del contenedor:

css @container (max-width: 400px) { .tarjeta { background-color: aquamarine; } }

Ahora la tarjeta cambia de color cuando su contenedor padre baja de 400 píxeles, sin importar cómo esté el viewport.

¿Por qué se activa antes de llegar a 400 píxeles exactos?

Porque el contenedor tiene un padding de 10 píxeles. El espacio interno disponible se reduce respecto al ancho total, así que la condición se cumple un poco antes, alrededor de los 420 píxeles de ancho externo. Es un detalle clave al calcular breakpoints.

¿Cuándo conviene usar container queries en vez de media queries? Cuando trabajas con componentes reutilizables que aparecen en distintas zonas de la web y deben adaptarse al espacio del contenedor, no al de la pantalla.

¿Qué ventajas reales aporta trabajar por contenedor?

Usar container queries te empuja hacia una arquitectura más limpia. Estos son los beneficios concretos que aparecen en el ejemplo:

• Componentización real: cada sección responde a su propio espacio.
• Menos líneas de CSS porque evitas duplicar reglas para cada viewport.
• Mayor mantenibilidad cuando muevas un componente de lugar.
• Escalabilidad del proyecto sin reescribir breakpoints globales.
• Estilos responsivos más predecibles en layouts complejos.

Después de ver estos puntos, queda claro que los container queries no reemplazan por completo a los media queries, pero sí resuelven casos donde el viewport no alcanza.

¿Qué propiedad activa un elemento como contenedor consultable?

La propiedad container-type. Con el valor inline-size defines que la consulta se base en el ancho del elemento. Sin esa declaración, la regla @container no tiene a quién observar y no se aplica.

Conceptos y datos clave que aparecen en el ejemplo

Para fijar las ideas, estos son los elementos técnicos que se trabajan en el código:

• Media query con max-width: 600px aplicado al viewport para cambiar el fondo a aquamarine [01:50].
• Container query con max-width: 400px aplicado al contenedor padre [02:30].
• container-type: inline-size, propiedad que habilita al div.contenedor como contexto de consulta [01:40].
• Padding de 10 píxeles en el contenedor, que adelanta el disparo del breakpoint a unos 420 píxeles externos [02:50].
• max-width de 900 píxeles en el contenedor para visualizar mejor la diferencia entre ambos enfoques [01:45].

Estos datos te sirven como referencia rápida cuando armes tus propios componentes.

¿Ya probaste reemplazar un media query por un container query en alguno de tus proyectos? Cuéntame en los comentarios qué componente ganaría más con este cambio.