Introducción

Las consultas de medios (media queries) son una característica poderosa de CSS que permiten aplicar estilos específicos a diferentes dispositivos y tamaños de pantalla. Esto es esencial para el diseño web responsivo, donde el objetivo es que las páginas web se vean y funcionen bien en una amplia variedad de dispositivos, desde teléfonos móviles hasta monitores de escritorio.

Conceptos Clave

Media Queries: Son reglas condicionales que aplican estilos CSS solo si se cumplen ciertas condiciones sobre el entorno del dispositivo.
Breakpoints: Son puntos específicos definidos en las consultas de medios donde el diseño del sitio web cambia para adaptarse mejor al tamaño de la pantalla.
Tipos de Medios: Incluyen screen (pantallas), print (impresión), all (todos los dispositivos), entre otros.

Sintaxis Básica

La sintaxis de una consulta de medios es la siguiente:

@media (condición) {
  /* Estilos CSS */
}

Ejemplo Básico

/* Estilos generales para todos los dispositivos */
body {
  font-family: Arial, sans-serif;
  background-color: white;
  color: black;
}

/* Estilos específicos para pantallas con un ancho máximo de 600px */
@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

En este ejemplo, el fondo del body cambiará a lightblue solo si el ancho de la pantalla es de 600px o menos.

Ejemplos Prácticos

Ejemplo 1: Cambiando el Diseño de una Página

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ejemplo de Media Queries</title>
  <style>
    .container {
      width: 80%;
      margin: 0 auto;
    }

    .sidebar, .content {
      padding: 20px;
      margin: 10px;
    }

    .sidebar {
      background-color: #f4f4f4;
    }

    .content {
      background-color: #e2e2e2;
    }

    @media (max-width: 768px) {
      .container {
        width: 100%;
      }

      .sidebar, .content {
        width: 100%;
        margin: 0;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="sidebar">Barra Lateral</div>
    <div class="content">Contenido Principal</div>
  </div>
</body>
</html>

Explicación

Estilos Generales: La clase .container tiene un ancho del 80% y está centrada con margin: 0 auto;. Las clases .sidebar y .content tienen un relleno y margen definidos.
Media Query: Cuando el ancho de la pantalla es de 768px o menos, el ancho de .container se ajusta al 100%, y .sidebar y .content también se ajustan al 100% del ancho, eliminando los márgenes.

Ejercicio Práctico

Ejercicio 1: Crear un Diseño Responsivo

Crea una página HTML con un encabezado, un contenido principal y un pie de página. Usa consultas de medios para cambiar el diseño en diferentes tamaños de pantalla.

Requisitos

El encabezado debe tener un fondo azul y el pie de página un fondo gris.
En pantallas de más de 600px de ancho, el contenido principal debe estar centrado con un ancho del 70%.
En pantallas de 600px o menos, el contenido principal debe ocupar el 100% del ancho y el texto debe estar centrado.

Solución

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Diseño Responsivo</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    header, footer {
      padding: 20px;
      color: white;
      text-align: center;
    }

    header {
      background-color: blue;
    }

    footer {
      background-color: gray;
    }

    .main-content {
      padding: 20px;
      margin: 20px auto;
    }

    @media (min-width: 601px) {
      .main-content {
        width: 70%;
      }
    }

    @media (max-width: 600px) {
      .main-content {
        width: 100%;
        text-align: center;
      }
    }
  </style>
</head>
<body>
  <header>
    <h1>Encabezado</h1>
  </header>
  <div class="main-content">
    <p>Este es el contenido principal de la página.</p>
  </div>
  <footer>
    <p>Pie de Página</p>
  </footer>
</body>
</html>

Explicación

Estilos Generales: El encabezado y el pie de página tienen colores de fondo y texto blanco, con texto centrado.
Media Query para Pantallas Grandes: .main-content tiene un ancho del 70% y está centrado.
Media Query para Pantallas Pequeñas: .main-content ocupa el 100% del ancho y el texto está centrado.

Conclusión

Las consultas de medios son esenciales para crear sitios web responsivos que se adapten a diferentes tamaños de pantalla y dispositivos. Al dominar las consultas de medios, puedes asegurarte de que tu sitio web proporcione una experiencia de usuario óptima en cualquier dispositivo. En el próximo módulo, exploraremos cómo hacer que las imágenes y videos sean responsivos, complementando lo aprendido en este módulo.

Consultas de Medios

Introducción

Conceptos Clave

Sintaxis Básica

Ejemplo Básico

Ejemplos Prácticos

Ejemplo 1: Cambiando el Diseño de una Página

Explicación

Ejercicio Práctico

Ejercicio 1: Crear un Diseño Responsivo

Requisitos

Solución

Explicación

Conclusión

Curso de HTML

Módulo 1: Introducción a HTML

Módulo 2: Formateo de Texto en HTML

Módulo 3: Enlaces y Medios en HTML

Módulo 4: Tablas en HTML

Módulo 5: Formularios en HTML

Módulo 6: Elementos Semánticos de HTML5

Módulo 7: Técnicas Avanzadas de HTML

Módulo 8: Integración de HTML y CSS

Módulo 9: Diseño Web Responsivo

Módulo 10: Mejores Prácticas y Accesibilidad

Módulo 11: Proyecto: Construyendo un Sitio Web Completo