11 - CSS: Media queries y diseño responsive 📱🌐

🎯 Objetivos de aprendizaje

• Entender qué son las media queries y cómo funcionan a nivel conceptual y práctico.

• Diferenciar entre las condiciones min-width y max-width y cuándo usar cada una.

• Comprender los enfoques mobile first y desktop first, y las ventajas de cada uno.

• Aprender a construir hojas de estilo adaptativas y eficientes que respondan al tamaño de la pantalla.

• Saber combinar media queries con unidades relativas y técnicas modernas para un diseño verdaderamente responsive.

---

📚 Contenidos teóricos con ejemplos claros y explicativos

¿Qué son las media queries?

Las media queries son una característica de CSS que permiten aplicar estilos condicionalmente, dependiendo de características del dispositivo o navegador donde se visualiza la página, como:

• El ancho o alto de la ventana (width, height)

• La orientación (horizontal o vertical)

• La resolución de pantalla

• La capacidad táctil, entre otros.

Con media queries podemos, por ejemplo, decir: "Aplica estos estilos solo si la pantalla es menor a 600px de ancho" o "Solo si la pantalla es mayor a 1024px de ancho".

---

min-width vs max-width

Estas son las condiciones más usadas en media queries cuando hablamos de ancho:

• max-width: significa “hasta un máximo de ancho”. Ejemplo: @media (max-width: 600px) aplica estilos para pantallas con un ancho igual o menor a 600 píxeles. Se usa para estilos que afectan dispositivos pequeños, como móviles.

• min-width: significa “a partir de un ancho mínimo”. Ejemplo: @media (min-width: 601px) aplica estilos para pantallas mayores o iguales a 601 píxeles. Se usa para dispositivos más grandes, como tablets y computadoras.

---

Enfoques de diseño responsive

Mobile First (Primero móvil)

• Se diseñan primero los estilos para dispositivos pequeños (móviles), pensando en una pantalla reducida.

• Luego, usando media queries con min-width, se van añadiendo estilos para pantallas más grandes (tablets, desktops).

• Ventajas:

  • El CSS base es ligero y adaptado para móviles, que suelen tener limitaciones de recursos y conexión.

  • El navegador sólo carga los estilos que necesita según el dispositivo.

  • Facilita que el diseño escale bien de lo pequeño a lo grande.

Ejemplo Mobile First:

/* Estilos para móviles, sin media queries */
body {
  font-size: 16px;
  padding: 10px;
}

/* Estilos para pantallas de al menos 768px (tablets y superiores) */
@media (min-width: 768px) {
  body {
    font-size: 20px;
    padding: 20px;
  }
}

---

Desktop First (Primero escritorio)

• Se diseñan primero los estilos para escritorio (pantallas grandes).

• Luego, usando media queries con max-width, se añaden reglas para adaptar el diseño a pantallas más pequeñas.

• Ventajas:

  • Fácil de entender para quienes empiezan diseñando en escritorio.

  • Mantiene el diseño completo y luego "lo simplifica" para móviles.

Ejemplo Desktop First:

/* Estilos para escritorio */
body {
  font-size: 20px;
  padding: 20px;
}

/* Estilos para pantallas hasta 767px (móviles y tablets pequeñas) */
@media (max-width: 767px) {
  body {
    font-size: 16px;
    padding: 10px;
  }
}

---

¿Cuál usar?

Hoy en día, el enfoque más recomendado es Mobile First porque:

• La mayoría del tráfico web viene de dispositivos móviles.

• Fomenta escribir CSS limpio, pequeño y eficiente.

• Facilita que el diseño escale hacia arriba sin complicaciones.

---

Cómo escribir media queries efectivas

• Escribe estilos base para móviles (Mobile First).

• Añade media queries con min-width para modificar estilos en tablets y desktops.

• Usa unidades relativas (em, %, rem) para que el contenido escale bien.

• Usa combinaciones con Flexbox o Grid para controlar la distribución del contenido.

• Evita duplicar código y mantén el CSS organizado y claro.

---

Ejemplo completo Mobile First con múltiples puntos de quiebre

/* Estilos base: móviles */
body {
  font-size: 16px;
  padding: 10px;
  background-color: #f0f0f0;
}

.container {
  width: 100%;
  padding: 10px;
}

/* Tablets y pantallas medianas (a partir de 768px) */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    padding: 20px;
  }
  .container {
    width: 750px;
    margin: 0 auto;
  }
}

/* Escritorios grandes (a partir de 1200px) */
@media (min-width: 1200px) {
  body {
    font-size: 20px;
  }
  .container {
    width: 1170px;
  }
}

---

💻 Código paso a paso (comentado)

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <title>Diseño Responsive Profundizado</title>
  <style>
    /* Estilos base para móviles */
    body {
      font-family: Arial, sans-serif;
      font-size: 16px;
      padding: 10px;
      background-color: #fafafa;
      color: #333;
      margin: 0;
    }

    .container {
      width: 100%;
      background-color: #4caf50;
      color: white;
      padding: 15px;
      box-sizing: border-box; /* Incluye padding en el ancho */
      text-align: center;
      border-radius: 8px;
      transition: all 0.3s ease;
      margin: 0 auto;
    }

    /* Tablets y pantallas medianas */
    @media (min-width: 768px) {
      body {
        font-size: 18px;
        padding: 20px;
        background-color: #e8f5e9;
      }
      .container {
        width: 750px;
        background-color: #388e3c;
      }
    }

    /* Escritorios grandes */
    @media (min-width: 1200px) {
      body {
        font-size: 20px;
        padding: 30px;
        background-color: #2e7d32;
      }
      .container {
        width: 1170px;
        background-color: #1b5e20;
      }
    }
  </style>
</head>
<body>

  <div class="container">
    Caja que cambia su tamaño, colores y tipografía según el tamaño de la pantalla.
  </div>

</body>
</html>

---

📝 Resumen de los conceptos aprendidos

• Las media queries permiten condicionar estilos CSS según características del dispositivo.

• max-width se usa para estilos hasta cierto ancho (ideal en enfoque desktop first).

• min-width se usa para estilos a partir de cierto ancho (ideal en enfoque mobile first).

• El enfoque mobile first recomienda diseñar primero para móviles y luego adaptar para pantallas más grandes.

• Es importante usar unidades relativas y combinar media queries con técnicas modernas para lograr diseños fluidos y accesibles.

---

🛠️ Ejercicio práctico final

Crea un archivo llamado responsive-avanzado.html con:

• Una caja .container que ocupe 100% del ancho en móviles, 750px en tablets y 1170px en escritorio.

• Cambia el tamaño de fuente y el color de fondo para cada punto de quiebre.

• Usa el enfoque mobile first, escribiendo primero los estilos para móviles.

• Abre la página y redimensiona la ventana para observar los cambios suaves.

---

💡 Tips adicionales

• Siempre usa box-sizing: border-box; para evitar que padding y borde influyan inesperadamente en el tamaño total de un elemento.

• Usa la función “modo responsive” en las herramientas para desarrolladores del navegador para probar diferentes tamaños sin cambiar tu dispositivo físico.

• Considera usar rem en lugar de px para tamaños de fuente, ya que rem escala mejor con configuraciones de usuario.

• Evita puntos de quiebre fijos en píxeles; intenta ajustarlos según el contenido y diseño de tu página.

• Combina media queries con Flexbox o Grid para controlar mejor el layout en distintos tamaños.

• Recuerda que el diseño responsive no solo es tamaño, también es usabilidad, accesibilidad y rendimiento.