Deja de pensar en píxeles fijos
Un diseño responsive de verdad no solo salta entre breakpoints: también
fluye entre ellos. Una tarjeta con width: 400px siempre mide 400 px, quepa
o no; una con width: 90% se amolda al hueco que tenga. Por eso usamos unidades
relativas en lugar de px fijos:
%: relativo al contenedor padre.width: 50%= la mitad del padre.rem: relativo al tamaño de fuente raíz (normalmente 16 px). Escala con las preferencias del usuario; ideal para tipografía y espaciado.vw/vh: 1 vw = 1 % del ancho del viewport; 1 vh = 1 % del alto.
.columna {
width: 90%; /* fluye con el contenedor */
max-width: 60rem; /* pero no crece sin límite */
margin: 0 auto; /* centrada */
}
Imágenes fluidas
Una imagen con un ancho mayor que su contenedor provoca scroll horizontal. La regla de oro es hacerla fluida:
img {
max-width: 100%; /* nunca más ancha que su contenedor */
height: auto; /* conserva la proporción */
}
max-width: 100% permite que la imagen se encoja en pantallas pequeñas pero
no se estire más allá de su tamaño natural. Es la base del media responsive.
Tipografía fluida con clamp()
Saltar el tamaño de letra entre breakpoints funciona, pero clamp() permite que
fluya de forma continua entre un mínimo y un máximo:
h1 {
font-size: clamp(1.5rem, 4vw, 3rem);
}
clamp(MÍNIMO, IDEAL, MÁXIMO) se lee así:
- Nunca baja de
1.5rem(legible en móvil). - El valor ideal,
4vw, crece con el ancho de la ventana. - Nunca supera
3rem(no se descontrola en pantallas enormes).
Resultado: un título que se adapta solo, sin una sola media query.
Combinar con flex y grid
Las unidades fluidas brillan junto a Flexbox y Grid, que ya reparten el espacio disponible. Un patrón muy potente para galerías responsive sin media queries:
.galeria {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
auto-fit + minmax crea tantas columnas como quepan, cada una de al menos
220 px y que se reparten el resto (1fr). En el móvil verás una columna; al
ensanchar, aparecen dos, tres, cuatro… sin que tú escribas un solo breakpoint. El
layout se reorganiza solo. Esto es responsive de nivel experto: deja que el
motor de layout decida en vez de codificar cada breakpoint a mano.
Y con eso cierras el círculo: viewport para activar el responsive, mobile-first para construir de menos a más, media queries para los saltos grandes y unidades fluidas para todo lo demás. Una web, todas las pantallas. 🚀