Diseño Responsivo

¿Qué es el Diseño Responsivo?

El diseño responsivo asegura que tu sitio web se vea y funcione bien en todos los dispositivos—desde teléfonos móviles hasta monitores de escritorio grandes. En lugar de crear sitios separados para diferentes dispositivos, el diseño responsivo usa CSS flexible que se adapta al tamaño de pantalla disponible.

La Meta Etiqueta Viewport

Esta etiqueta es esencial para el diseño responsivo. Sin ella, los navegadores móviles renderizan las páginas al ancho de escritorio y las escalan hacia abajo.

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

Media Queries

Las media queries te permiten aplicar CSS basado en las características del dispositivo, más comúnmente el ancho de pantalla.

/* Se aplica cuando el viewport es 768px o más ancho */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

/* Se aplica cuando el viewport es 767px o menos */
@media (max-width: 767px) {
  .sidebar {
    display: none;
  }
}

/* Rango (767px a 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Estilos para tablets */
}

/* Mobile first - estilos base para móviles */

/* Tablets pequeñas */
@media (min-width: 640px) { }

/* Tablets */
@media (min-width: 768px) { }

/* Laptops */
@media (min-width: 1024px) { }

/* Escritorio */
@media (min-width: 1280px) { }

/* Pantallas grandes */
@media (min-width: 1536px) { }

Enfoque Mobile-First

La estrategia mobile-first significa escribir estilos base para móviles primero, luego agregar estilos para pantallas más grandes con min-width. Esto es mejor porque:

• El tráfico móvil domina la web
• Fuerza a priorizar contenido esencial
• Mejora CSS progresivamente en lugar de degradar
• Generalmente resulta en CSS más limpio

/* Mobile first: estilos base */
.container {
  padding: 1rem;
}

.sidebar {
  display: none;
}

/* Tablet y arriba */
@media (min-width: 768px) {
  .container {
    display: grid;
    grid-template-columns: 250px 1fr;
  }

  .sidebar {
    display: block;
  }
}

/* Escritorio */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

Unidades Responsivas

/* rem - relativo al font-size de root (html) */
font-size: 1rem;      /* 16px por defecto */
padding: 1.5rem;      /* 24px */

/* em - relativo al font-size del padre */
font-size: 1.2em;     /* 1.2x el tamaño del padre */

/* Porcentaje - relativo al padre */
width: 100%;
max-width: 50%;

/* Unidades de viewport */
width: 100vw;         /* 100% del ancho del viewport */
height: 100vh;        /* 100% de la altura del viewport */
font-size: 5vw;       /* 5% del ancho del viewport */

/* clamp(mínimo, preferido, máximo) */
font-size: clamp(1rem, 2.5vw, 2rem);
/* Mínimo 1rem, escala con viewport, máximo 2rem */

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

.container {
  width: clamp(320px, 90%, 1200px);
}

Imágenes Responsivas

/* Imágenes responsivas básicas */
img {
  max-width: 100%;
  height: auto;
}

/* Imágenes de fondo responsivas */
.hero {
  background-image: url('hero.jpg');
  background-size: cover;
  background-position: center;
}

/* Diferentes imágenes para diferentes pantallas */
.hero {
  background-image: url('hero-mobile.jpg');
}

@media (min-width: 768px) {
  .hero {
    background-image: url('hero-desktop.jpg');
  }
}