Respuesta corta: El diseño web responsive consiste en hacer un sitio para que su diseño se ajuste a cualquier pantalla: una columna en el teléfono y más en la computadora. Se apoya en cuatro piezas: la etiqueta viewport, diseños flexibles, imágenes que se encogen y consultas de medios para los cambios grandes.
Qué es el diseño web responsive
MDN atribuye el término a Ethan Marcotte, que en 2010 describió cuadrículas fluidas, imágenes fluidas y consultas de medios trabajando juntas. web.dev lo explica como un diseño que cambia según el dispositivo que se usa.
Su ejemplo es sencillo: una columna en el teléfono, dos en una tableta y tres o cuatro en una computadora. Como los tamaños de pantalla no paran de crecer, web.dev dice que un sitio debe adaptarse a cualquier tamaño, actual o futuro.
Si vas a planear una web nueva, nuestra guía del wireframe web explica cómo dibujar la versión para teléfono junto a la de computadora.
Las cuatro piezas
| Pieza | Qué hace | Qué recomienda web.dev |
|---|---|---|
| Etiqueta viewport | Hace que la página use el ancho del teléfono | width=device-width, initial-scale=1, y nada que impida hacer zoom |
| Diseño flexible | Deja que filas y columnas se reorganicen | Flexbox, cuadrícula o multicol en lugar de un ancho fijo |
| Imágenes | Mantienen las fotos dentro de la pantalla | Un ancho máximo del 100%, más los atributos width y height |
| Consultas de medios | Cambian el diseño en ciertos anchos | Breakpoints elegidos por el contenido, no por los dispositivos |
Según «Conceptos básicos del diseño web responsivo» de web.dev, consultado el 3 de noviembre de 2026.
Sin esa etiqueta, explica web.dev, el teléfono maqueta la página a unos 980 píxeles de ancho, según el dispositivo, y luego la reduce. El texto queda tan pequeño que hay que hacer zoom.
Cómo elegir los breakpoints
Un breakpoint es el ancho en el que una consulta de medios cambia el diseño. web.dev desaconseja definirlos por clases de dispositivos, productos, marcas o sistemas operativos: debe decidir el contenido. Nuestra guía de reflow en WCAG explica por qué tu diseño también debe aguantar a 320 píxeles de ancho.
Su método es diseñar primero para una pantalla pequeña y ensancharla hasta que el diseño necesite cambiar. Para el texto, cita la recomendación clásica de 70 a 80 caracteres por línea.
También advierte que no conviene ocultar contenido solo porque no entra en una pantalla pequeña.
Cómo hacer que tu web sea responsive
- Pon en el head la etiqueta viewport (width=device-width, initial-scale=1) y deja el zoom libre.
- Haz primero el diseño para pantallas pequeñas.
- Ensancha la ventana hasta que algo se vea mal y agrega ahí un breakpoint.
- Usa flexbox o cuadrícula para filas y columnas, no anchos fijos.
- Da a las imágenes un ancho máximo del 100% y los atributos width y height para que el navegador reserve su espacio.
- Mantén el texto largo cerca de 70 a 80 caracteres por línea en pantallas anchas.
- Revisa tus breakpoints con DevTools de Chrome en modo dispositivo y después en un teléfono real.
Nuestra guía de la prueba de optimización para móviles explica cómo revisar las páginas ahora que la prueba de Google ya no existe.
Nuestros propios breakpoints
El 3 de noviembre de 2026 abrimos nuestra web en un navegador con varios anchos para ver dónde cambia su diseño.
Las tablas de nuestras guías usan el mismo breakpoint de 600 píxeles del ejemplo de web.dev. Con 600 píxeles de ancho, cada fila se convierte en una tarjeta con sus etiquetas; con 601, vuelve a ser una tabla.
La cabecera tiene su propio breakpoint, fijado por su contenido. El menú completo necesita espacio, así que con 1,140 píxeles o menos la cabecera muestra un botón «Menu», y desde 1,141 muestra todos los enlaces. Nuestra guía del menú hamburguesa explica cuándo tiene sentido ese botón.
Comprobaciones antes de publicar
- Todas las páginas tienen la etiqueta viewport y el zoom funciona.
- Ninguna página se mueve de lado en un teléfono.
- Ninguna imagen se sale del borde de la pantalla.
- Cada breakpoint existe porque el contenido lo necesitaba.
- No se oculta nada importante en pantallas pequeñas.
- Las páginas se revisaron en un teléfono real.
RecuerdaDeja que el contenido fije los breakpoints: empieza en pequeño, ensancha la pantalla y cambia el diseño solo donde se rompe.
Si quieres una web que se adapte a cualquier pantalla, nuestro servicio de diseño web puede hacerla contigo.
Respuestas rápidas sobre el diseño web responsive
¿Qué es el diseño web responsive?
Es una forma de hacer un sitio para que su diseño cambie y se ajuste a la pantalla en la que se ve. MDN atribuye el término a Ethan Marcotte en 2010: cuadrículas fluidas, imágenes fluidas y consultas de medios.
¿Qué breakpoints debo usar?
Los que necesite tu contenido. web.dev desaconseja definirlos según clases de dispositivos, productos o marcas. Diseña primero para una pantalla pequeña, ensánchala y agrega un breakpoint donde el diseño empiece a verse mal.
¿Qué es una consulta de medios?
Un filtro sobre los estilos CSS. web.dev describe las consultas de medios como filtros que cambian los estilos según el dispositivo, como su ancho, su alto, su orientación o si tiene pantalla táctil.
¿Por qué mi web se mueve de lado en el teléfono?
Casi siempre algo se sale del borde de la pantalla, a menudo una imagen con un ancho fijo. web.dev recomienda dar a las imágenes un ancho máximo del 100% para que se ajusten al espacio disponible.
¿Cómo compruebo un diseño responsive?
Cambia el tamaño del navegador o usa el modo de dispositivo de Chrome DevTools, que puede mostrar tus consultas de medios como barras de colores sobre la página. Después revisa también las páginas reales en un teléfono.
Fuentes
Consultadas el 3 de noviembre de 2026. web.dev: Conceptos básicos del diseño web responsivo. MDN Web Docs: Diseño web adaptable. Nuestro caso: nuestra página de inicio y una guía en un navegador con varios anchos, el 3 de noviembre de 2026.