📘 Módulo 4: CSS Responsive Design y Media Queries

Aprende a usar media queries para adaptar estilos según el dispositivo. Crea layouts que funcionen en móvil, tablet y escritorio.

Objetivos

Comprender qué significa responsive design.
Aprender a usar media queries para adaptar estilos según el dispositivo.
Crear layouts que funcionen en móvil, tablet y escritorio.
Introducir buenas prácticas de diseño adaptable.

🔹 1. ¿Qué es el diseño responsive?

El diseño responsive permite que una web se adapte automáticamente al tamaño de pantalla del usuario. 👉 Ejemplo: un menú horizontal en escritorio que se convierte en menú vertical en móvil.

🔹 2. Media Queries

Las media queries aplican estilos condicionales según el ancho de la pantalla.

css

/* Estilos generales (desktop first) */
body {
  font-size: 18px;
}

/* Tablet */
@media (max-width: 1024px) {
  body {
    font-size: 16px;
  }
}

/* Móvil */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

🔹 3. Ejemplo práctico: Layout adaptable

css

.contenedor {
  display: grid;
  grid-template-columns: 3fr 1fr; /* main + sidebar */
  gap: 20px;
}

/* En pantallas pequeñas, sidebar debajo */
@media (max-width: 768px) {
  .contenedor {
    grid-template-columns: 1fr; /* una sola columna */
  }
}

🔹 4. Imágenes y tipografía responsive

css

img {
  max-width: 100%; /* evita que se desborde */
  height: auto;
}

h1 {
  font-size: 3vw; /* tamaño relativo al ancho de la ventana */
}

🔹 5. Buenas prácticas

Usa unidades relativas (em, rem, %, vw, vh) en lugar de píxeles fijos.
Diseña pensando en mobile first: empieza por pantallas pequeñas y escala hacia arriba.
Prueba siempre en varios dispositivos y navegadores.

📝 Actividad práctica

Crea un layout con Grid que tenga sidebar en escritorio y se convierta en una sola columna en móvil.
Haz que las imágenes se adapten al ancho de su contenedor.
Ajusta el tamaño de la tipografía con vw para que se escale automáticamente.

MÓDULO 5 CSS Avanzado – Efectos visuales modernos