Diseño responsivo en la práctica: que tu sitio funcione en cualquier pantalla

¿Alguna vez abriste un sitio en el celular y apareció todo roto? Texto que se sale por el costado, un botón que desaparece, una barra de scroll horizontal que no debería existir. O dividiste la pantalla de la computadora en dos para seguir un tutorial, y el sitio de al lado simplemente dejó de funcionar.

Le pasa a todo el mundo. Y fue exactamente eso lo que me encontré en mi pasantía, en 2024: algunas pantallas no se ajustaban en los dispositivos más chicos, y en los monitores grandes el diseño quedaba desparramado, sin sentido. Yo no sabía cómo resolverlo, así que me puse a investigar: leí documentación, revolví foros, probé un montón de cosas, hasta que las pantallas se comportaron en cualquier tamaño. De ahí en adelante se volvió costumbre, cada pantalla que entrego ya nace responsiva. Junté aquí lo que aprendí, el texto que me hubiera gustado leer en aquel momento.

Qué es la responsividad, de verdad#

La responsividad es que un sitio se adapte a cualquier tamaño de pantalla, del celular al monitor gigante, sin volverse incómodo de usar. El diseño se reorganiza solo: los elementos cambian de tamaño, las imágenes se achican, las columnas se vuelven filas. A veces incluso rediseñas un pedazo de la pantalla para que tenga sentido en ese espacio.

La idea no es nueva, y hasta tiene fecha de nacimiento. En 2010, Ethan Marcotte publicó "Responsive Web Design" en A List Apart y bautizó el concepto juntando tres piezas: grid fluido, imágenes flexibles y media queries. Quince años después, esa sigue siendo la base.

El primer paso que casi todos olvidan: el viewport#

Antes de cualquier media query, hay una línea de HTML que, si falta, nada funciona bien en el celular:

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

Sin ella, el celular finge que tiene el ancho de un escritorio y achica la página entera (ese sitio diminuto que te obliga a hacer zoom para poder leer). Con ella, el navegador usa el ancho real del dispositivo. Es el punto de partida de la responsividad, como lo explica la documentación de MDN. Yo ya perdí un montón de tiempo cazando un bug que era solo esa línea faltante.

Empieza pensando en el celular, no en el escritorio#

Un error que yo cometía: diseñar todo para el monitor grande y después tratar de exprimirlo en el celular. El camino más tranquilo es el contrario, lo que la gente llama mobile-first. Escribes el estilo base pensando en la pantalla chica y vas sumando ajustes a medida que la pantalla crece.

Da menos retrabajo, y el sitio queda más liviano justo donde la mayoría de la gente entra, que es el celular.

Media queries: estilo distinto según el tamaño de pantalla#

La herramienta principal es la @media. Aplica un bloque de CSS solo cuando la pantalla cumple una condición:

/* estilo base: vale para todos (el celular primero) */
.container {
  display: flex;
  flex-direction: column;
}

/* de 768px para arriba (tablet y escritorio), pasa a fila */
@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }
}

Traducido: por defecto los elementos quedan apilados, uno debajo del otro, que es lo ideal en el celular. Cuando la pantalla tiene 768px o más, pasan a quedar uno al lado del otro.

La diferencia entre los dos límites es simple: min-width aplica el estilo del ancho elegido hacia arriba; max-width, del ancho elegido hacia abajo. En mobile-first usas casi siempre min-width, sumando capas a medida que la pantalla crece.

Puedes combinar condiciones con and para apuntar a un rango específico:

/* solo entre 768px y 1024px (rango de tablet) */
@media (min-width: 768px) and (max-width: 1024px) {
  .container {
    padding: 20px;
  }
}

Y el CSS actual ya acepta una sintaxis de intervalo bastante más legible, descrita en la referencia de MDN:

@media (768px <= width <= 1024px) {
  .container { padding: 20px; }
}

Breakpoints: no memorices números, observa el contenido#

Hay algunos rangos comunes que sirven como punto de partida:

• Celular: hasta unos 600px
• Tablet: cerca de 600px a 1024px
• Escritorio: por encima de 1024px

Pero el consejo que me cambió la cabeza (y que repiten tanto MDN como el web.dev de Google) es este: el mejor breakpoint no es el tamaño de un dispositivo, es el punto en que tu diseño empieza a verse feo. Ve achicando la ventana del navegador poco a poco; cuando algo se rompa, ahí tienes un breakpoint. Sale un dispositivo nuevo todos los años. Tu contenido, no.

Antes de llenar todo de media queries#

Aquí va lo que me ahorró la mitad de las media queries: buena parte de la responsividad ocurre sin ninguna, si usas las herramientas correctas.

Cambia el pixel fijo por unidades relativas (%, rem, em) y, para la tipografía, el clamp(), que hace que el tamaño varíe solo dentro de un límite:

h1 {
  font-size: clamp(1.75rem, 5vw, 3rem);
}

El título nunca queda más chico que 1.75rem ni más grande que 3rem, y varía suave en el medio. Cero media query.

Flexbox y Grid también fueron pensados para el layout fluido. Un grid que se reorganiza solo:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 1rem;
}

Esto encaja todas las columnas que quepan y cae a una sola en el celular, sin que escribas un solo breakpoint. La propia MDN trata Flexbox, Grid y la tipografía fluida como el corazón del diseño responsivo de hoy.

La evolución: container queries#

La media query mira el tamaño de la pantalla. Pero un mismo componente, una tarjeta por ejemplo, puede aparecer en una columna ancha o en una barra lateral angosta dentro de la misma pantalla. Quien resuelve eso es la container query: reacciona al tamaño del contenedor, no de la ventana.

.lista {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex;
  }
}

Ahora la tarjeta se adapta al espacio que realmente tiene, sin importar la pantalla alrededor. Ya funciona en todos los navegadores actuales y, para un componente reutilizable, me cambió la forma de pensar el layout. Está todo en la documentación de MDN.

Para cerrar#

La responsividad no es memorizar tres breakpoints. Es partir del celular, usar unidades relativas, Flexbox y Grid para dejar el layout fluido, y llamar a la media query (o a la container query) solo cuando el contenido lo pida. Empieza por la meta viewport, ve achicando la ventana y arregla cada punto que se rompa.

Para ir más allá, puedes leer la base de MDN sobre diseño responsivo, la guía de web.dev y, para entender de dónde vino todo, el artículo original de Marcotte. Si te gusta leer la fuente de todo, la especificación actual está en la W3C.

¿Tienes alguna pantalla que se empeña en no ajustarse? Escríbeme por LinkedIn. Me encanta este tema.