Hacer una página web responsive significa que se ve y funciona bien en cualquier pantalla: móvil, tablet u ordenador. Hoy no es opcional. La mayor parte del tráfico es móvil y Google indexa priorizando la versión móvil, así que una web que no se adapta pierde visitas y posiciones.
En esta guía te llevo paso a paso, con código actualizado y el enfoque que se usa hoy: mobile-first, breakpoints por contenido, flexbox, grid e imágenes adaptables. Nada de recetas de 2014.
Qué es el diseño web responsive
Una web responsive usa un único código que se reorganiza según el ancho de la pantalla: las columnas se apilan, el menú se convierte en un botón, las imágenes se reducen. No es lo mismo que una web que solo encoge: aquí el diseño cambia de verdad para que en el móvil se lea cómodo sin hacer zoom.
Se apoya en tres pilares: la etiqueta viewport, las media queries de CSS y los layouts flexibles con unidades relativas. Vamos uno por uno.
Paso 1: el viewport
Sin esta línea en el <head>, el móvil renderiza tu web como si fuera un escritorio y la encoge. Es lo primero:
<meta name="viewport" content="width=device-width, initial-scale=1">Importante: no añadas maximum-scale=1 ni user-scalable=no. Bloquear el zoom perjudica la accesibilidad y hoy se considera mala práctica. Deja que el usuario amplíe si lo necesita.
Paso 2: mentalidad mobile-first
Diseña primero para móvil y luego amplía hacia pantallas grandes. En CSS esto significa escribir los estilos base para el móvil y usar min-width para ir añadiendo lo que necesitas al crecer la pantalla. Es más limpio que ir tapando problemas con max-width.
Paso 3: media queries y breakpoints
Un breakpoint es el ancho a partir del cual tu diseño cambia. La clave de 2026: no pongas breakpoints por dispositivo concreto (hay cientos de móviles), ponlos donde tu diseño se rompe. Un esquema mobile-first sencillo:
/* Estilos base: móvil */
.container { width: 100%; padding: 1rem; }
/* Tablet en adelante */
@media (min-width: 48em) { /* ~768px */
.container { max-width: 45rem; margin-inline: auto; }
}
/* Escritorio en adelante */
@media (min-width: 64em) { /* ~1024px */
.container { max-width: 60rem; }
}Usa em o rem en los breakpoints en lugar de píxeles: respetan el tamaño de fuente del usuario y envejecen mejor.
Paso 4: layouts flexibles con Flexbox y Grid
Aquí está el gran cambio respecto a hace unos años: hoy muchos diseños se adaptan solos, casi sin media queries, gracias a Flexbox y Grid.
Con Grid puedes crear una rejilla de tarjetas que reparte columnas según el espacio disponible, sin un solo breakpoint:
.galeria {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1.5rem;
}Esa línea dice: «mete tantas columnas como quepan, cada una de al menos 16rem, y reparte el sobrante». En móvil sale una columna; en escritorio, las que quepan. Magia sin media queries.
Regla práctica: usa Flexbox para componentes en una dirección (una barra de navegación, una fila de botones) y Grid para maquetar en dos dimensiones (rejillas, layouts de página).
Paso 5: imágenes y tipografía fluida
Que una imagen nunca desborde su contenedor es la base:
img { max-width: 100%; height: auto; }Para que el móvil no descargue una imagen enorme, sirve varios tamaños con srcset y deja que el navegador elija:
<img
src="foto-800.jpg"
srcset="foto-400.jpg 400w, foto-800.jpg 800w, foto-1200.jpg 1200w"
sizes="(max-width: 48em) 100vw, 50vw"
alt="Descripción de la imagen">Y para la tipografía, en vez de saltos bruscos entre breakpoints, usa clamp() para que el tamaño crezca de forma fluida entre un mínimo y un máximo:
h1 { font-size: clamp(1.75rem, 4vw + 1rem, 3rem); }Un paso más: container queries
Las media queries miran el ancho de la pantalla. Las container queries, ya soportadas en los navegadores actuales, miran el ancho del contenedor. Sirven para que un mismo componente (una tarjeta, por ejemplo) se adapte según dónde lo coloques, no según el tamaño de la ventana. Es el siguiente nivel del responsive y merece la pena tenerlo en el radar.
Atajo: si necesitas una web adaptable ya montada, en Envato Elements tienes plantillas HTML responsive listas para personalizar. Y si aún no tienes dónde alojarla, mira opciones de hosting con buen soporte.
Checklist responsive
- Etiqueta viewport con
width=device-width, initial-scale=1. - Estilos base para móvil y
min-widthpara pantallas mayores. - Breakpoints donde el diseño se rompe, en
em/rem. - Flexbox y Grid con unidades relativas antes que anchos fijos.
- Imágenes con
max-width:100%ysrcsetpara servir el tamaño justo. - Tipografía fluida con
clamp(). - Áreas táctiles de al menos 44px y sin bloquear el zoom.
- Prueba real en móvil, no solo redimensionando el navegador.
Errores comunes que hunden el responsive
- Anchos fijos en píxeles en contenedores: rompen en cuanto la pantalla es más estrecha.
- Bloquear el zoom con
user-scalable=no: problema de accesibilidad. - Breakpoints por dispositivo concreto: salen decenas y no cubres los nuevos.
- Servir siempre la imagen grande: penaliza la velocidad en móvil.
Más sobre diseño web en el blog
- Microinteracciones web con código — para dar vida a tu diseño responsive.
- Sistemas de diseño en Figma con IA — para trabajar con criterio de sistema.
- Diseño de páginas web para inspirarte.
- Todos los artículos de diseño web.
Preguntas frecuentes
¿Cuál es la diferencia entre responsive y adaptativo?
El responsive usa un único diseño fluido que se reorganiza con CSS. El adaptativo (adaptive) sirve maquetas distintas y fijas según el dispositivo detectado. Hoy lo estándar es responsive: un solo código para todo.
¿Qué breakpoints debo usar?
Los que pida tu diseño, no los de un móvil concreto. Como orientación funcionan ~48em (tablet) y ~64em (escritorio), pero añade uno donde veas que el layout se rompe.
¿WordPress ya es responsive?
Depende del tema. La mayoría de temas modernos lo son, pero si personalizas con CSS propio tienes que seguir estas mismas reglas para no romper la adaptabilidad.
¿Cómo compruebo si mi web es responsive?
Abre las DevTools del navegador (F12) y activa el modo dispositivo, o mejor aún, ábrela en tu móvil real. Revisa que no haya scroll horizontal y que el texto se lea sin ampliar.
Con esto tienes la base para que cualquier web se vea bien en todas las pantallas. Si te ha servido, compártelo o cuéntame en comentarios en qué breakpoint se te suele romper el diseño.
