Diseño responsive

Tu web se verá bien en móviles, tablets y escritorio.

Más de la mitad del tráfico web mundial viene de dispositivos móviles. Si tu página se ve bien en un monitor de escritorio pero es ilegible en un teléfono, estás perdiendo a más de la mitad de tus visitantes.

Diseño responsive significa que tu web se adapta automáticamente a cualquier tamaño de pantalla: desde un teléfono de 375px hasta un monitor ultrawide de 3440px. En este capítulo vas a aprender las técnicas para lograrlo.

La meta tag viewport

Antes de cualquier CSS, asegúrate de tener esta línea en el <head> de tu HTML:

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

Sin esta línea, los navegadores móviles muestran tu página como si fuera un escritorio y la encogen para que quepa. Con ella, el navegador usa el ancho real del dispositivo.

Mobile-first: empieza por lo pequeño

Hay dos formas de hacer diseño responsive:

Desktop-first: diseñas para escritorio y luego adaptas para móvil.
Mobile-first: diseñas para móvil y luego expandes para escritorio.

Mobile-first es la forma correcta. ¿Por qué?

Es más fácil agregar que quitar. Empiezas con un layout simple (una columna) y agregas complejidad (varias columnas) conforme crece la pantalla.
La mayoría del tráfico es móvil. Tu CSS base debe funcionar para la mayoría de usuarios.
Fuerza la priorización. En una pantalla pequeña no cabe todo, así que decides qué es realmente importante.

Mobile-first

Escribe tu CSS base para pantallas pequeñas. Luego usa min-width en tus media queries para añadir estilos cuando la pantalla sea más grande. Nunca al revés.

Media queries

Las media queries son la herramienta principal del diseño responsive. Permiten aplicar estilos solo cuando se cumple una condición (generalmente, un ancho mínimo o máximo de pantalla).

/* Base: móvil (sin media query) */
.cards {
  display: grid;
  grid-template-columns: 1fr;   /* Una columna */
  gap: 1rem;
}

/* Tablet: 768px o más */
@media (min-width: 768px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);  /* Dos columnas */
  }
}

/* Desktop: 1024px o más */
@media (min-width: 1024px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);  /* Tres columnas */
  }
}

Breakpoints comunes

No hay breakpoints “oficiales”, pero estos son los más usados:

Nombre	Ancho	Dispositivo
sm	640px	Móviles grandes
md	768px	Tablets
lg	1024px	Laptops
xl	1280px	Escritorios
2xl	1536px	Pantallas grandes

Pro tip

No intentes diseñar para dispositivos específicos (“iPhone 15”, “iPad Pro”). Diseña para rangos de ancho. Los dispositivos cambian cada año, pero los rangos de ancho se mantienen estables. Usa los breakpoints como guías, no como reglas absolutas.

Ejemplo completo: layout responsive

/* Base: móvil */
body {
  padding: 1rem;
}

.layout {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "sidebar"
    "footer";
  gap: 1rem;
}

/* Tablet */
@media (min-width: 768px) {
  body {
    padding: 2rem;
  }

  .layout {
    grid-template-areas:
      "header  header"
      "main    sidebar"
      "footer  footer";
    grid-template-columns: 2fr 1fr;
  }
}

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

Observa cómo el layout cambia de una columna (móvil) a dos columnas con sidebar (tablet) y se centra con un ancho máximo en escritorio. Todo con la misma estructura HTML.

Unidades fluidas

Además de media queries, las unidades relativas hacen que tu diseño se adapte sin saltos bruscos.

`%` — Relativo al padre

.contenedor {
  width: 90%;          /* El 90% del ancho del padre */
  max-width: 1200px;   /* Pero nunca más de 1200px */
  margin: 0 auto;
}

`vw` y `vh` — Relativo al viewport

.hero {
  height: 100vh;       /* Ocupa toda la altura de la ventana */
  width: 100vw;        /* Ocupa todo el ancho de la ventana */
}

h1 {
  font-size: 5vw;      /* El texto crece con la pantalla */
}

`clamp()` — Lo mejor de ambos mundos

clamp(mínimo, ideal, máximo) establece un valor con límites:

h1 {
  /* Mínimo 1.5rem, ideal 4vw, máximo 3rem */
  font-size: clamp(1.5rem, 4vw, 3rem);
}

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

clamp() es perfecto para tipografía responsive. El texto crece y encoge suavemente sin necesidad de media queries.

Pro tip

clamp() reemplaza muchos media queries para tamaños de fuente. En vez de definir 3 tamaños en 3 breakpoints, una sola línea con clamp() hace la transición suave. Úsalo para font-size, padding y gap.

Imágenes responsive

Las imágenes necesitan atención especial en diseño responsive.

La regla básica

img {
  max-width: 100%;     /* Nunca más grande que su contenedor */
  height: auto;        /* Mantiene la proporción */
  display: block;      /* Elimina el espacio extra debajo */
}

Esta regla debe estar en todos tus proyectos. Sin ella, las imágenes se desbordan de sus contenedores en pantallas pequeñas.

`<picture>` — Diferentes imágenes por pantalla

<picture>
  <source media="(min-width: 1024px)" srcset="hero-desktop.jpg">
  <source media="(min-width: 768px)" srcset="hero-tablet.jpg">
  <img src="hero-mobile.jpg" alt="Imagen hero del sitio">
</picture>

El navegador elige la imagen adecuada según el tamaño de pantalla. Así cargas imágenes más ligeras en móvil y más detalladas en escritorio.

`object-fit` — Controlar cómo se ajusta la imagen

.avatar {
  width: 200px;
  height: 200px;
  object-fit: cover;     /* Recorta para llenar sin deformar */
  border-radius: 50%;    /* Circular */
}

object-fit: cover es como background-size: cover pero para <img>. La imagen llena el espacio sin deformarse, recortando lo que sobra.

Patrones responsive comunes

Menú hamburguesa (solo CSS)

.menu-toggle {
  display: block;       /* Visible en móvil */
}

.nav-links {
  display: none;        /* Ocultos en móvil */
}

@media (min-width: 768px) {
  .menu-toggle {
    display: none;      /* Oculto en desktop */
  }

  .nav-links {
    display: flex;      /* Visible en desktop */
    gap: 2rem;
  }
}

Texto que cambia de alineación

.hero-text {
  text-align: center;            /* Centrado en móvil */
}

@media (min-width: 768px) {
  .hero-text {
    text-align: left;            /* A la izquierda en desktop */
  }
}

Ocultar elementos en móvil

.sidebar {
  display: none;                 /* Oculta en móvil */
}

@media (min-width: 1024px) {
  .sidebar {
    display: block;              /* Visible en desktop */
  }
}

Ejercicio: Haz tu página responsive

Toma la página que has ido construyendo en los ejercicios anteriores y hazla responsive.

Verifica que tienes la meta tag viewport en tu HTML.
Aplica la regla base para imágenes: max-width: 100%, height: auto.
Mobile-first: asegúrate de que tu CSS base (sin media queries) funcione bien en una pantalla de 375px. Abre las DevTools y activa el modo responsive (el icono de dispositivo móvil).
Agrega un breakpoint para tablet (@media (min-width: 768px)) donde tus tarjetas pasen de 1 columna a 2 columnas.
Agrega un breakpoint para desktop (@media (min-width: 1024px)) donde pases a 3 columnas y limites el ancho máximo del contenedor a 1200px.
Usa clamp() para los tamaños de fuente de tus títulos: font-size: clamp(1.5rem, 4vw, 2.5rem).
Prueba en diferentes tamaños arrastrando el borde del navegador. La transición debe ser suave, sin nada que se rompa o desborde.

Resumen

Mobile-first: escribe CSS base para móvil y usa @media (min-width: ...) para pantallas más grandes.
La meta tag viewport es obligatoria para que las media queries funcionen en móvil.
Breakpoints comunes: 640px (sm), 768px (md), 1024px (lg), 1280px (xl).
Unidades fluidas (%, vw, vh, rem) se adaptan sin saltos bruscos.
clamp(min, ideal, max) es la herramienta estrella para tipografía responsive.
Imágenes: max-width: 100% + height: auto siempre. Usa <picture> para diferentes resoluciones.
Diseña para rangos de ancho, no para dispositivos específicos.

Fuente oficial: Responsive design en MDN — guía completa con ejemplos de cada técnica.

Siguiente capítuloSCSSCSS con superpoderes: variables, anidamiento, mixins y más.

Diseño responsive

Diseño responsive

La meta tag viewport

Mobile-first: empieza por lo pequeño

Media queries

Breakpoints comunes

Ejemplo completo: layout responsive

Unidades fluidas

% — Relativo al padre

vw y vh — Relativo al viewport

clamp() — Lo mejor de ambos mundos

Imágenes responsive

La regla básica

<picture> — Diferentes imágenes por pantalla

object-fit — Controlar cómo se ajusta la imagen

Patrones responsive comunes

Menú hamburguesa (solo CSS)

Texto que cambia de alineación

Ocultar elementos en móvil

Resumen

`%` — Relativo al padre

`vw` y `vh` — Relativo al viewport

`clamp()` — Lo mejor de ambos mundos

`<picture>` — Diferentes imágenes por pantalla

`object-fit` — Controlar cómo se ajusta la imagen