Skip to content
Logo de la documentación HoneyCode

11. Responsive Design y Media Queries

Responsive Design es la técnica de crear sitios web que se adaptan automáticamente a diferentes tamaños de pantalla y dispositivos, proporcionando una experiencia óptima en móviles, tablets y escritorio.

📱 Introducción al Responsive Design

Section titled “📱 Introducción al Responsive Design”

¿Qué es el Responsive Design?

Section titled “¿Qué es el Responsive Design?”

El diseño responsivo permite que un sitio web:

  • ✅ Se adapte a diferentes tamaños de pantalla
  • ✅ Reorganice el contenido según el dispositivo
  • ✅ Optimice imágenes y recursos
  • ✅ Mejore la experiencia del usuario
  • ✅ Mantenga una sola base de código

Viewport Meta Tag

Section titled “Viewport Meta Tag”

Fundamental para el diseño responsivo. Debe estar en el <head> de tu HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Parámetros:

  • ✅ width=device-width - Ancho igual al dispositivo
  • ✅ initial-scale=1.0 - Zoom inicial al 100%
  • ✅ maximum-scale=5.0 - Zoom máximo permitido
  • ✅ user-scalable=yes - Permite zoom (accesibilidad)

🎯 Media Queries (@media)

Section titled “🎯 Media Queries (@media)”

@media - Reglas CSS condicionales

Section titled “@media - Reglas CSS condicionales”

Las media queries permiten aplicar estilos diferentes según las características del dispositivo.

/* Sintaxis básica */
@media (max-width: 768px) {
  .elemento {
    font-size: 14px;
  }
}


/* Múltiples condiciones */
@media (min-width: 768px) and (max-width: 1024px) {
  .elemento {
    font-size: 16px;
  }
}


/* Orientación */
@media (orientation: portrait) {
  .elemento {
    width: 100%;
  }
}
/* Por ancho de pantalla */
@media (max-width: 768px) {
  /* Pantallas menores o iguales a 768px */
}


@media (min-width: 769px) {
  /* Pantallas mayores o iguales a 769px */
}


@media (min-width: 768px) and (max-width: 1024px) {
  /* Entre 768px y 1024px */
}


/* Por altura */
@media (max-height: 600px) {
  /* Pantallas con altura menor o igual a 600px */
}


/* Por orientación */
@media (orientation: portrait) {
  /* Modo vertical (móviles) */
}


@media (orientation: landscape) {
  /* Modo horizontal (tablets, desktop) */
}


/* Por resolución */
@media (min-resolution: 2dppx) {
  /* Pantallas retina (alta resolución) */
}


/* Modo oscuro */
@media (prefers-color-scheme: dark) {
  /* Usuario prefiere modo oscuro */
}


/* Reducir movimiento (accesibilidad) */
@media (prefers-reduced-motion: reduce) {
  /* Usuario prefiere menos animaciones */
}

Operadores:

  • ✅ and - Combina condiciones (ambas deben cumplirse)
  • ✅ or - Alternativa (al menos una debe cumplirse)
  • ✅ not - Negación
  • ✅ , (coma) - Funciona como OR

📏 Breakpoints Estándar

Section titled “📏 Breakpoints Estándar”

Breakpoints más usados en la industria

Section titled “Breakpoints más usados en la industria”

Los breakpoints son los puntos donde el diseño cambia para adaptarse a diferentes tamaños de pantalla.

/* Mobile First (recomendado) */
/* Mobile: estilos base */
.elemento {
  font-size: 14px;
  padding: 10px;
}


/* Tablet: 768px+ */
@media (min-width: 768px) {
  .elemento {
    font-size: 16px;
    padding: 15px;
  }
}


/* Desktop: 1024px+ */
@media (min-width: 1024px) {
  .elemento {
    font-size: 18px;
    padding: 20px;
  }
}


/* Large Desktop: 1440px+ */
@media (min-width: 1440px) {
  .elemento {
    font-size: 20px;
    padding: 25px;
  }
}
/* Sistema de breakpoints estándar */


/* Extra Small (móviles pequeños) */
@media (max-width: 575px) {
  /* < 576px */
}


/* Small (móviles) */
@media (min-width: 576px) {
  /* ≥ 576px */
}


/* Medium (tablets) */
@media (min-width: 768px) {
  /* ≥ 768px */
}


/* Large (desktop) */
@media (min-width: 992px) {
  /* ≥ 992px */
}


/* Extra Large (desktop grande) */
@media (min-width: 1200px) {
  /* ≥ 1200px */
}


/* Extra Extra Large */
@media (min-width: 1400px) {
  /* ≥ 1400px */
}

Frameworks populares:

  • 📱 Bootstrap: 576px, 768px, 992px, 1200px, 1400px
  • 📱 Tailwind CSS: 640px, 768px, 1024px, 1280px, 1536px
  • 📱 Material Design: 600px, 960px, 1280px, 1920px

💧 Diseño Fluido

Section titled “💧 Diseño Fluido”

Unidades relativas para diseño fluido

Section titled “Unidades relativas para diseño fluido”

El diseño fluido usa unidades relativas en lugar de fijas para que los elementos se adapten proporcionalmente.

/* ❌ Diseño fijo (no responsive) */
.container {
  width: 1200px;
  padding: 20px;
  font-size: 16px;
}


/* ✅ Diseño fluido (responsive) */
.container {
  width: 90%;
  max-width: 1200px;
  padding: 5%;
  font-size: clamp(14px, 2vw, 18px);
}
/* Unidades relativas */


/* Porcentajes (%) */
.elemento {
  width: 80%;  /* 80% del contenedor padre */
}


/* Viewport Width (vw) */
.elemento {
  width: 50vw;  /* 50% del ancho de la ventana */
  font-size: 2vw;  /* 2% del ancho de la ventana */
}


/* Viewport Height (vh) */
.elemento {
  height: 100vh;  /* 100% de la altura de la ventana */
}


/* vmin y vmax */
.elemento {
  font-size: 3vmin;  /* 3% del lado más pequeño */
  width: 50vmax;     /* 50% del lado más grande */
}


/* clamp() - Tamaño fluido con límites */
.elemento {
  font-size: clamp(14px, 2vw, 24px);
  /* Mínimo 14px, ideal 2vw, máximo 24px */


  width: clamp(300px, 80%, 1200px);
  /* Mínimo 300px, ideal 80%, máximo 1200px */
}


/* min() y max() */
.elemento {
  width: min(90%, 1200px);  /* El menor de los dos */
  padding: max(20px, 2vw);  /* El mayor de los dos */
}

Ventajas:

  • ✅ Se adapta a cualquier tamaño de pantalla
  • ✅ Menos breakpoints necesarios
  • ✅ Transiciones suaves entre tamaños
  • ✅ Más mantenible

📱 Mobile First

Section titled “📱 Mobile First”

Estrategia Mobile First

Section titled “Estrategia Mobile First”

Mobile First significa diseñar primero para móviles y luego agregar estilos para pantallas más grandes.

/* ✅ Mobile First (recomendado) */
/* Estilos base para móvil */
.elemento {
  font-size: 14px;
  padding: 10px;
  flex-direction: column;
}


/* Tablet y superior */
@media (min-width: 768px) {
  .elemento {
    font-size: 16px;
    padding: 20px;
    flex-direction: row;
  }
}


/* Desktop y superior */
@media (min-width: 1024px) {
  .elemento {
    font-size: 18px;
    padding: 30px;
  }
}
/* ❌ Desktop First (no recomendado) */
/* Estilos base para desktop */
.elemento {
  font-size: 18px;
  padding: 30px;
  flex-direction: row;
}


/* Tablet y menor */
@media (max-width: 1023px) {
  .elemento {
    font-size: 16px;
    padding: 20px;
  }
}


/* Móvil y menor */
@media (max-width: 767px) {
  .elemento {
    font-size: 14px;
    padding: 10px;
    flex-direction: column;
  }
}
/* Ventajas de Mobile First */


/* 1. Mejor rendimiento en móviles */
/* Los estilos base son ligeros, se agregan más para desktop */


/* 2. Progressive Enhancement */
/* Mejora progresiva: funciona en todos los dispositivos */


/* 3. Más fácil de mantener */
/* min-width es más intuitivo que max-width */


/* 4. Prioriza el contenido */
/* Te obliga a pensar en lo esencial primero */


/* Ejemplo completo Mobile First */
.navbar {
  /* Mobile: menú hamburguesa */
  flex-direction: column;
  padding: 10px;
}


.navbar-menu {
  display: none;  /* Oculto en móvil */
}


.navbar-toggle {
  display: block;  /* Botón hamburguesa visible */
}


/* Tablet: menú horizontal */
@media (min-width: 768px) {
  .navbar {
    flex-direction: row;
    padding: 15px 30px;
  }


  .navbar-menu {
    display: flex;  /* Menú visible */
  }


  .navbar-toggle {
    display: none;  /* Botón oculto */
  }
}

Por qué Mobile First:

  • 📱 Rendimiento: Carga más rápida en móviles
  • 📱 SEO: Google prioriza mobile-first indexing
  • 📱 UX: Mejor experiencia en dispositivos móviles
  • 📱 Mantenimiento: Código más limpio y escalable

🎓 Resumen

Section titled “🎓 Resumen”

🚀 Próximos pasos

Section titled “🚀 Próximos pasos”

Ahora que dominas Responsive Design, puedes:

  • ✅ Crear sitios que funcionen en todos los dispositivos
  • ✅ Implementar estrategia Mobile First
  • ✅ Usar media queries efectivamente
  • ✅ Aplicar diseño fluido con unidades relativas
🐝