📘 Módulo 16: CSS Responsive Avanzado

Dominar el uso de container queries para componentes adaptativos. Combinar funciones modernas con media queries.

Objetivos

Dominar el uso de container queries para componentes adaptativos.
Combinar funciones modernas (clamp(), min(), max(), minmax()) con media queries.
Crear layouts fluidos que se ajusten automáticamente al espacio disponible.
Implementar un enfoque component-driven en el diseño responsive.

🔹 1. Container Queries

Permiten aplicar estilos según el tamaño del contenedor, no solo de la ventana.

css

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

@container card (max-width: 400px) {
  .card-content {
    flex-direction: column;
  }
}

@container card (min-width: 401px) {
  .card-content {
    flex-direction: row;
  }
}

👉 El layout de la tarjeta cambia según el espacio disponible en su contenedor.

🔹 2. Tipografía fluida con `clamp()`

css

h1 {
  font-size: clamp(1.5rem, 2vw, 3rem);
}

👉 Se adapta automáticamente entre un mínimo y un máximo, manteniendo legibilidad en cualquier dispositivo.

🔹 3. Layouts flexibles con `minmax()`

css

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

👉 Las tarjetas se reorganizan automáticamente según el ancho disponible.

🔹 4. Combinación con media queries

css

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

👉 Usa media queries para cambios globales y container queries para ajustes locales.

🔹 5. Buenas prácticas

Diseña con enfoque mobile first.
Usa container queries para componentes reutilizables.
Combina funciones modernas para tipografía y espaciado fluido.
Testea en distintos dispositivos y navegadores.

📝 Actividad práctica

Crea una tarjeta con container queries que cambie de layout según su ancho.
Implementa tipografía fluida con clamp().
Diseña una galería con Grid y minmax() que se adapte automáticamente.
Añade media queries para ocultar el sidebar en pantallas pequeñas.

MÓDULO 17 CSS Scroll y Parallax avanzado