Diseño adaptable (responsive)

Una web adaptable reorganiza su contenido según el ancho disponible: una columna en el móvil, varias en el ordenador, con textos legibles y botones fáciles de pulsar.

Se consigue con la etiqueta <meta name="viewport">, unidades flexibles, Flexbox y Grid, y consultas de medios (@media) que cambian estilos a partir de cierto ancho.

Un ejemplo

Al girar el móvil, la tienda pasa de mostrar un producto por fila a mostrar dos.

Por qué importa

Una página adaptable (responsive) se ve y funciona bien en cualquier tamaño de pantalla, del móvil al monitor grande. Hoy gran parte del tráfico web llega desde móviles, por lo que diseñar solo para escritorio deja fuera a muchos usuarios, y los buscadores como Google valoran la versión móvil de tu sitio. Se logra con tres ingredientes: una etiqueta viewport en el HTML, medidas flexibles (porcentajes, rem, fr) y consultas de medios (@media) que cambian el diseño según el ancho.

Un enfoque habitual es «mobile first»: empiezas con el diseño de pantalla pequeña, que es el más sencillo, y vas añadiendo reglas para pantallas mayores con @media (min-width: 768px). Combinado con Flexbox y Grid, permite que las columnas se apilen en el móvil y se coloquen en paralelo en pantallas más anchas, sin mantener dos versiones del sitio.

Confusiones frecuentes

Se confunde con tener una web móvil separada: en el diseño adaptable hay un solo código que se ajusta. Un fallo muy frecuente es olvidar <meta name="viewport" content="width=device-width, initial-scale=1">: sin ella, el móvil muestra la página como si tuviera ancho de escritorio, reducida, y las consultas de medios parecen no funcionar. Otro error de principiante es fijar anchos en píxeles para los elementos principales, lo que provoca desplazamiento horizontal en pantallas pequeñas. Y probar solo reduciendo la ventana no basta: conviene comprobar en un móvil real.

Preguntas frecuentes

¿Qué anchos suelen usarse como puntos de corte?

No hay cifras obligatorias. Muchos proyectos usan alrededor de 600, 768 y 1024 píxeles, pero lo mejor es poner el corte donde tu diseño empieza a verse mal.

¿Cómo pruebo mi web en distintos tamaños?

En el navegador, pulsa F12 y activa el modo de dispositivo para simular móviles y tabletas. Complétalo con una prueba en un teléfono real.