Videoconferencia S5

Menú responsive

Esconder y mostrar diferentes menús de acuerdo al ancho de pantalla

Container Queries

¿Qué pasa si quiero que un elemento responda al espacio que tiene disponible y no al ancho de la ventana?

Ejemplo Figma

Antes de empezar

Este es un tema bastante complejo y en esta sesión no puedo explicarlo todo.

Recomiendo leer los siguientes artículos para entenderlo mejor:

• Explicación súper sencilla: Qué son las Container Queries en CSS y Cómo Usarlas
• Explicación exhaustiva: A Primer On CSS Container Queries
• MDN: Container Queries

1. Necesito declarar un contenedor

Esto no es automático, y se hace así:

• Es imprescindible usar container-type: inline-size;
• container-name es opcional

2. El container query

Funciona igual que un media query:

• Si no usé container-name, no lo pongo en el query, y el navegador buscará el contenedor declarado más cercano.

Ejemplos CodePen

Enlace Más cards

Para la próxima semana

Quiénes quieran seguir lo que voy haciendo:
Instalar Node.js