Una web, muchísimas pantallas
Imagina que escribes una sola web y se ve perfecta en un móvil de 360 px, en una tablet, en un portátil y en un monitor de 27 pulgadas. Esa es la promesa del responsive, y es enorme: hoy la mitad del tráfico web es móvil. Si tu página no funciona en el bolsillo de la gente, has perdido a la mitad de tus visitantes antes de empezar.
Lo contrario salta a la vista enseguida. Un diseño con anchos fijos en píxeles que se ve genial en tu portátil se rompe en el móvil: aparece scroll horizontal, el texto se sale por los lados, los botones quedan minúsculos.
El diseño responsive (responsive design) consiste en construir un único documento que se adapta a cualquier viewport, en lugar de mantener versiones separadas para móvil y escritorio. Una web, todas las pantallas.
La etiqueta viewport (imprescindible)
Sin ella, el móvil finge ser una pantalla ancha (~980 px) y reduce todo a
escala, dejándolo ilegible. Va siempre en el <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width: el ancho del viewport = el ancho real del dispositivo.initial-scale=1: sin zoom inicial.
Esta línea es el interruptor que activa el responsive. Es el primer paso de cualquier proyecto serio.
⚠️ TRAMPA CLÁSICA: olvidar la meta viewport. Tu CSS responsive puede estar impecable, pero sin esta línea el móvil lo ignora y muestra la versión «de escritorio» encogida. Si en el teléfono se ve todo diminuto, mira el
<head>antes que nada.
Mobile-first: diseña primero para móvil
La estrategia profesional es mobile-first: escribes los estilos base pensando en la pantalla más pequeña y luego añades complejidad para pantallas grandes mediante media queries.
/* Base: móvil. Una sola columna, ocupa todo el ancho. */
.galeria {
display: flex;
flex-direction: column;
gap: 12px;
}
¿Por qué empezar por lo pequeño? Piensa en hacer la maleta: primero metes lo imprescindible y, si te llevas una maleta más grande, añades cosas. Es mucho más fácil que empezar con la maleta enorme y tener que ir sacando.
- El móvil es la restricción más dura: si cabe ahí, escala bien hacia arriba.
- Los estilos base son los más simples; vas sumando mejoras, no deshaciendo trucos hechos para escritorio.
- La mayoría del tráfico web hoy es móvil: merece la prioridad.
⚠️ TRAMPA CLÁSICA: diseñar desktop-first (primero el monitor grande) y «luego ya lo adaptaré al móvil». Casi siempre acabas peleándote con tu propio CSS para deshacer lo que hiciste. Empieza pequeño y crece: vas a sufrir mucho menos.