Diseño responsive — Frontend Classroom

El diseño responsive (o diseño adaptable) es un enfoque en el que una sola página web se ve y funciona bien en cualquier tamaño de pantalla: un teléfono de 375px, una tablet de 768px, un portátil de 1280px o un monitor de 2560px. En lugar de crear versiones separadas del sitio para móvil y escritorio, se escribe un único HTML y se usa CSS para que el layout, los tamaños y las imágenes se adapten al espacio disponible. El término fue acuñado por Ethan Marcotte en 2010 y hoy es el estándar de facto de la web.

El problema que el diseño responsive resuelve es real: antes de él, los sitios se diseñaban con anchos fijos de ~960px. En un teléfono, el navegador los reducía hasta que fueran ilegibles, o el usuario tenía que hacer zoom y scroll horizontal para leer. La alternativa era mantener un sitio separado en un subdominio m. — duplicando el trabajo y desincronizando el contenido. Responsive unifica ambos en uno: el mismo documento, el mismo CSS bien escrito, comportándose distinto según el contexto.

El diseño responsive moderno se apoya en cuatro herramientas que trabajan juntas: el meta viewport (que le dice al móvil cómo escalar el documento), las media queries (que aplican estilos condicionales según el ancho), las unidades relativas (vw, %, rem, em) y las imágenes fluidas (max-width: 100% + srcset). No es necesario usar las cuatro en cada proyecto, pero entender cómo colaboran es la base del trabajo moderno.

Cómo funciona

El viewport meta — el paso que no se puede saltar

Sin el <meta name="viewport">, un smartphone simula un viewport de ~980px para que los sitios de escritorio “quepan” en pantalla, luego lo achica para que entre, y el resultado es texto diminuto e ilegible. El meta viewport desactiva esa simulación y le dice al navegador que use el ancho real del dispositivo:

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

width=device-width significa “el viewport tiene el mismo ancho que la pantalla física”. initial-scale=1 significa “no hagas zoom inicial”. Sin esta línea, las media queries pueden estar bien escritas y no dispararse nunca en un móvil real, porque el navegador no usa el ancho físico. Es la primera línea de todo sitio responsive.

Esta declaración vive en <head> y está documentada en la entrada <meta>. La referencia responsive no la recrea: la enlaza.

Mobile-first: diseñar desde el móvil hacia arriba

Mobile-first es la estrategia de escribir los estilos base pensando en el móvil — sin ninguna media query — y luego agregar estilos para pantallas más grandes dentro de @media (min-width: …). Es el patrón estándar del diseño responsive moderno.

/* Estilos base — aplican en mobile y en todo lo más grande */
.nav {
  flex-direction: column;
  gap: 0.5rem;
}

/* Se expande en tablet+ */
@media (min-width: 768px) {
  .nav {
    flex-direction: row;
    gap: 1.5rem;
  }
}

La alternativa opuesta — desktop-first, con @media (max-width: …) para “reducir” en mobile — existe pero genera CSS más difícil de mantener: hay que sobreescribir propiedades en cascada en lugar de agregarlas limpiamente. Mobile-first es más limpio porque agrega complejidad a medida que el espacio disponible crece, y así el CSS refleja cómo crece la información, no cómo se achica.

Las herramientas del toolkit responsive

El diseño responsive no es una sola técnica sino un conjunto de herramientas que se usan según la necesidad:

Media queries — la herramienta para cambios de layout explícitos. @media (min-width: 768px) { … } activa un bloque de CSS cuando el viewport alcanza ese ancho. Es el bisturí: se usa cuando el layout necesita cambiar de forma deliberada (de columna a fila, de sidebar oculto a sidebar visible). Ver media-queries.

Unidades relativas — vw (porcentaje del ancho del viewport), % (porcentaje del contenedor), rem/em (relativas a la fuente). Son la base del layout fluido: en lugar de hardcodear width: 960px, se escribe width: min(960px, 90%) o simplemente max-width: 1200px con contenedor fluido. Ver unidades.

clamp() — para tamaños que deben escalar suavemente entre un mínimo y un máximo según el viewport, sin saltos de breakpoint. El caso más común es la tipografía: font-size: clamp(1rem, 4vw, 2rem). Ver clamp().

Imágenes fluidas — max-width: 100% + height: auto hace que una imagen nunca desborde su contenedor pero tampoco se estire más allá de su tamaño natural. Para servir imágenes de resolución correcta según la pantalla, srcset y <picture> permiten al navegador elegir la fuente más adecuada. Ver <img> y <picture>, y width para max-width.

Cuándo usarlo

El diseño responsive aplica a toda página o componente que va a verse en más de un tipo de dispositivo — que en la práctica es casi cualquier sitio web. No es una técnica opcional sino el estándar de trabajo actual. La pregunta no es “¿hago responsive?” sino “¿qué combinación de herramientas necesita este proyecto?”: algunos layouts se adaptan bien solo con unidades relativas, otros necesitan media queries explícitas, otros necesitan ambas.

Notas, gotchas e interacción

Sin el meta viewport, las media queries de min-width no funcionan en móvil. El navegador simula un viewport ancho y las condiciones nunca se cumplen como se espera. El meta viewport es el prerequisito de todo lo demás.
Mobile-first implica min-width, no max-width. Si escribís @media (max-width: 768px) estás haciendo desktop-first: los estilos base son de escritorio y los de móvil son overrides. Funciona, pero es más difícil de mantener.
Los breakpoints se eligen por contenido, no por dispositivo. El punto de quiebre correcto es donde el layout “se rompe” o se ve mal — no “768px porque es un iPad”. Con tantos tamaños de pantalla distintos hoy, los breakpoints por dispositivo se desactualizan rápido.
clamp() y las unidades relativas no reemplazan totalmente a las media queries. Son complementarios: clamp() es ideal para valores continuos (tamaños de fuente, paddings); las media queries son necesarias cuando el layout cambia de forma categórica (de columna única a dos columnas).
Las imágenes son el componente que más fácilmente desborda. Sin max-width: 100%, una imagen con ancho fijo rompe el layout en pantallas angostas. Es la primera regla CSS de cualquier reset responsive.

Vigente / legacy

El diseño responsive con las herramientas descritas acá es completamente vigente. Las técnicas que quedaron obsoletas son las de la era pre-responsive: sitios de ancho fijo en píxeles, versiones m. separadas, tablas para layout y el atributo <meta http-equiv="X-UA-Compatible"> para IE.

Container Queries (@container) es una evolución más reciente que complementa (no reemplaza) las media queries: permite condicionar estilos al tamaño del contenedor en lugar del viewport. Es Baseline widely desde 2023, pero se considera una expansión avanzada fuera del alcance de esta entrada.

Aprendelo en el recorrido

Esta entrada complementa la lección Tu primer documento responsive: viewport y mobile-first del módulo Diseño responsive.

Ver también

media-queries — la at-rule @media, min-width y breakpoints por contenido
clamp() — tipografía fluida sin media queries
unidades — vw, %, rem, em como base del layout fluido
width — max-width para contenedores y max-width: 100% para imágenes
picture — imágenes responsive con múltiples fuentes
img — imágenes fluidas con max-width: 100% y srcset
meta — el <meta name="viewport"> obligatorio