Media Queries vs Container Queries en CSS Responsivo

Entender la diferencia entre media queries y container queries es fundamental al desarrollar sitios web responsivos. Tradicionalmente, las media queries han sido la herramienta habitual para ajustar nuestra página según el tamaño del viewport o pantalla. Sin embargo, las container queries ofrecen un enfoque nuevo que optimiza el diseño basándose en el tamaño del contenedor Padre, no del viewport general de la pantalla. Esta técnica facilita una adaptación más precisa y flexible en estructuras complejas.

¿Qué son y cómo funcionan las media queries?

Las media queries ajustan los estilos según el tamaño del viewport (pantalla completa):

• Se configuran estilos cuando el ancho pantalla es menor o mayor a determinados píxeles.
• Ejemplo muy común: cambiar un color o disposición al bajar de 600 píxeles de ancho.

Implementación práctica con CSS:

.tarjeta {
    border: 2px solid black;
    padding: 20px;
    font-size: 16px;
    width: 100%;
    max-width: 600px;
}

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

Observamos que, al ajustar el ancho por debajo de los 600 píxeles del viewport, el color del div cambia a Aquamarine.

¿Qué ventajas ofrecen las container queries?

En contraste, las container queries dependen del tamaño específico del contenedor padre:

• Reaccionan directamente al ancho del elemento contenedor en vez del viewport completo.
• Son especialmente útiles para componentes reutilizables y modularizados.

Ejemplo básico en código CSS:

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

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

Aquí, el color del div cambia cuando el contenedor alcanza un ancho específico (considerando el padding interno), volviendo los componentes individuales más independientes y estables.

¿Cómo elegir entre media queries y container queries?

Seleccionar entre ambas técnicas dependerá específicamente de tu proyecto y necesidades:

• Las media queries siguen siendo útiles para una respuesta global (pantalla completa).
• Las container queries brindan una ventaja definitiva en diseño modular para interfaces complejas.

Aplicar container queries facilita el mantenimiento, escalabilidad y limpieza del código. La modularización centrada en contenedores es especialmente efectiva en interfaces modernas con componentes dinámicos reutilizables.

¿Tu proyecto actual usa container queries o media queries? Comparte tu experiencia y comenta cuál consideras más efectiva según tu caso particular.