Container queries vs media queries

Del viewport al componente

El responsive clásico parte del viewport. Definimos breakpoints globales, por ejemplo a 768px o 1024px, y ahí decidimos cómo cambia el layout completo. Ese enfoque sigue funcionando, pero tiene una limitación clara: asume que todos los componentes viven en el mismo contexto.

En proyectos con sidebars, grids asimétricos, módulos reutilizados en varias plantillas o bloques que pasan de una columna ancha a otra estrecha, esa suposición deja de ser fiable. El container no necesita saber cuánto mide la pantalla; necesita saber cuánto espacio recibe.

Media queries responden al entorno global; container queries responden al entorno local del componente.

Qué son las media queries

Las media queries aplican estilos basados en características del dispositivo o del viewport: anchura, altura, orientación o tipo de medio. Son la base del responsive tradicional y siguen siendo la mejor herramienta para decisiones globales.

• Cambiar la estructura principal de la página.
• Reorganizar cabecera, sidebar o footer.
• Adaptar navegación, overlays o patrones dependientes de pantalla.

Qué son las container queries

Las container queries permiten aplicar estilos según el tamaño de un contenedor concreto. En lugar de tomar como referencia el viewport, toman el contenedor, normalmente con container-type: inline-size;.

Eso permite que una misma card, un mismo módulo o una misma pieza de UI se comporte de forma distinta según el ancho real de la columna donde aparece. Es un cambio enorme para design systems y sitios basados en componentes.

Un componente reusable deja de depender de breakpoints globales “prestados” y gana autonomía dentro del layout.

Diferencias clave

Sintaxis comparada

La diferencia conceptual es grande, pero la sintaxis no resulta extraña. Ese parecido hace que la curva de aprendizaje sea relativamente suave si ya trabajas con CSS moderno.

.card {
  display: block;
}

@media (min-width: 768px) {
  .card {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.5rem;
  }
}

.card-wrapper {
  container-type: inline-size;
}

.card {
  display: block;
}

@container (min-width: 30rem) {
  .card {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.5rem;
  }
}

Cuándo usar cada una

Usa media queries cuando el cambio sea estructural

• El layout general pasa de una columna a varias.
• La navegación cambia de desktop a móvil.
• Hay decisiones ligadas al viewport completo.

Usa container queries cuando el cambio sea interno al componente

• Cards, grids internos, módulos de contenido o bloques reutilizados.
• Componentes que aparecen en zonas de ancho variable.
• Interfaces donde el mismo módulo vive en contextos muy distintos.

Estrategia recomendada hoy

La combinación más sólida no es elegir una tecnología y descartar la otra. Lo más sensato es usar media queries para el layout macro y container queries para la lógica responsive interna de los componentes.

Una buena regla práctica: si estás diseñando la página, piensa en media queries; si estás diseñando un bloque reusable, piensa primero en container queries. Ese cambio de mentalidad ayuda a escribir CSS más escalable, legible y portable entre plantillas.

Patrón útil: MQ para estructura, CQ para componentes. No compiten; se complementan.