Diseño responsivo moderno: más allá de las media queries
Container queries, tipografía fluida, dimensionado intrínseco y clamp(): técnicas modernas que reducen las media queries y dan layouts flexibles.
El diseño responsivo comenzó con las media queries: se definen puntos de ruptura (breakpoints) en anchos de viewport específicos y se reorganiza el diseño. Este enfoque funciona, pero genera diseños rígidos y dependientes del viewport. El CSS moderno ofrece herramientas para lograr una responsividad intrínseca: componentes que se adaptan al tamaño de su contenedor, texto que escala de forma fluida y layouts que responden al espacio disponible sin breakpoints fijos.
Tipografía fluida con clamp()
En lugar de saltar entre tamaños de fuente en cada breakpoint, clamp() permite una transición suave entre un tamaño mínimo y uno máximo.
/* ❌ Abrupt font size changes at breakpoints */
h1 { font-size: 1.5rem; }
@media (min-width: 768px) { h1 { font-size: 2rem; } }
@media (min-width: 1200px) { h1 { font-size: 3rem; } }
/* ✅ Fluid scaling — smooth transition between min and max */
h1 {
/* Minimum 1.5rem, preferred 4vw, maximum 3rem */
font-size: clamp(1.5rem, 4vw, 3rem);
}
/* Complete fluid type scale */
:root {
--text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
--text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
--text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
--text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
--text-xl: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
--text-2xl: clamp(1.5rem, 1.1rem + 2vw, 2.5rem);
--text-3xl: clamp(1.875rem, 1.2rem + 3.2vw, 3.5rem);
}Container Queries
Las media queries responden al viewport. Las container queries responden al tamaño del contenedor padre, lo que permite crear componentes verdaderamente reutilizables.
/* ❌ Media query — this card changes based on viewport width
Breaks when placed in a narrow sidebar on a wide screen */
.card { display: flex; flex-direction: column; }
@media (min-width: 768px) {
.card { flex-direction: row; } /* Horizontal on "tablet+" */
}
/* ✅ Container query — card adapts to its container's width */
.card-container {
container-type: inline-size;
container-name: card-wrapper;
}
.card {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Card goes horizontal when its container is wide enough */
@container card-wrapper (min-width: 500px) {
.card {
flex-direction: row;
align-items: center;
}
.card-image {
width: 200px;
flex-shrink: 0;
}
}
@container card-wrapper (min-width: 800px) {
.card {
gap: 2rem;
}
.card-title {
font-size: var(--text-xl);
}
}Dimensionamiento intrínseco con min(), max() y clamp()
Combina funciones de dimensionamiento intrínseco para crear elementos que se adaptan sin necesidad de breakpoints.
/* ❌ Fixed max-width with media queries for padding */
.content {
max-width: 1200px;
margin: 0 auto;
padding: 1rem;
}
@media (min-width: 768px) {
.content { padding: 2rem; }
}
@media (min-width: 1200px) {
.content { padding: 4rem; }
}
/* ✅ Fluid container with clamp */
.content {
width: min(90%, 1200px); /* 90% of viewport or 1200px, whichever is smaller */
margin-inline: auto;
padding-inline: clamp(1rem, 5vw, 4rem); /* Fluid padding */
}
/* Fluid spacing scale */
:root {
--space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
--space-sm: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
--space-md: clamp(1rem, 0.8rem + 1vw, 1.5rem);
--space-lg: clamp(1.5rem, 1rem + 2.5vw, 3rem);
--space-xl: clamp(2rem, 1.5rem + 3vw, 4rem);
}Relación de aspecto para contenido multimedia responsivo
La propiedad aspect-ratio mantiene las proporciones sin necesidad del truco de padding-top.
/* ❌ Padding-top hack for 16:9 aspect ratio */
.video-wrapper {
position: relative;
padding-top: 56.25%; /* 9/16 = 0.5625 */
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* ✅ Native aspect-ratio */
.video-wrapper {
aspect-ratio: 16 / 9;
width: 100%;
}
.video-wrapper iframe {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Responsive image gallery with consistent proportions */
.gallery-item img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 0.5rem;
}Propiedades lógicas para internacionalización
Las propiedades lógicas (inline y block en lugar de left y right) se adaptan automáticamente a distintas direcciones de escritura.
/* ❌ Physical properties — break in RTL languages */
.card {
margin-left: 1rem;
padding-right: 2rem;
text-align: left;
border-left: 3px solid blue;
}
/* ✅ Logical properties — work in any writing direction */
.card {
margin-inline-start: 1rem;
padding-inline-end: 2rem;
text-align: start;
border-inline-start: 3px solid blue;
}
/* Shorthand logical properties */
.section {
margin-block: 2rem; /* top and bottom in LTR */
padding-inline: 1.5rem; /* left and right in LTR */
border-block-end: 1px solid; /* bottom border in LTR */
}Combinando técnicas
/* A fully intrinsic card component */
.card-grid {
container-type: inline-size;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-md);
padding: var(--space-lg);
width: min(95%, 1400px);
margin-inline: auto;
}
.card {
display: flex;
flex-direction: column;
gap: var(--space-sm);
padding: var(--space-md);
border-radius: clamp(0.5rem, 1vw, 1rem);
}
.card-title {
font-size: var(--text-lg);
line-height: 1.3;
}
.card-image {
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: inherit;
}Puntos clave
- clamp() genera un escalado fluido — la tipografía, el espaciado y los tamaños se adaptan de forma fluida sin saltos entre breakpoints
- Las container queries permiten componentes reutilizables — los componentes responden a su contenedor, no al viewport
- min() y max() para dimensionamiento intrínseco —
width: min(90%, 1200px)es más limpio que max-width con margin auto - aspect-ratio reemplaza el truco del padding — dimensionamiento proporcional nativo para imágenes y contenedores de video
- Las propiedades lógicas facilitan la internacionalización —
inline-starten lugar deleftfunciona en cualquier dirección de escritura - Combina técnicas fluidas para minimizar el uso de media queries — la mayor parte del comportamiento responsivo puede lograrse con CSS intrínseco
