📘 Módulo 8: CSS Moderno – Funciones avanzadas

Conocer funciones modernas como clamp(), min(), max() y minmax(). Aplicar las funciones en ejemplos prácticos de diseño responsivo.

Objetivos

• Conocer funciones modernas como clamp(), min(), max() y minmax().
• Aprender a usar container queries para estilos adaptativos más precisos.
• Crear tipografías y layouts que se ajusten automáticamente al espacio disponible.
• Aplicar estas funciones en ejemplos prácticos de diseño responsivo.

🔹 1. Función clamp()

Permite definir un valor con mínimo, preferido y máximo.

css

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

👉 El título nunca será más pequeño de 1.5rem, ni más grande de 3rem, y se ajustará con 2vw.

🔹 2. Funciones min() y max()

• min(): toma el valor más pequeño.
• max(): toma el valor más grande.

css

img {
  width: min(100%, 600px); /* nunca más ancho de 600px */
}

section {
  height: max(50vh, 400px); /* al menos 400px de alto */
}

🔹 3. Función minmax() en Grid

Define un rango flexible para columnas o filas.

css

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

👉 Crea columnas que nunca sean más pequeñas de 200px, pero que se expandan hasta ocupar el espacio disponible.

🔹 4. Container Queries

Permiten aplicar estilos basados en el tamaño del contenedor, no solo de la ventana.

css

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

@container (max-width: 499px) {
  .card {
    display: block;
  }
}

👉 Ideal para componentes reutilizables que se adaptan según el espacio en el que se insertan.

🔹 5. Ejemplo práctico: Tipografía fluida

css

p {
  font-size: clamp(14px, 2vw, 20px);
}

👉 El texto se ajusta automáticamente entre 14px y 20px según el ancho de pantalla.

📝 Actividad práctica

1. Crea un título con clamp() que se adapte a móvil, tablet y escritorio.
2. Diseña una galería con Grid usando minmax() para que las tarjetas se ajusten automáticamente.
3. Implementa un componente .card con container queries que cambie de layout según el espacio disponible.

MÓDULO 9 CSS Accesibilidad