CSS
Estrategia responsive
Define una estrategia responsive basada en contenido, layout fluido, breakpoints justificados, componentes adaptables y preferencias del usuario.
- Última actualización
- Actualizada
- Nivel
- Aplicación
CSS
Define una estrategia responsive basada en contenido, layout fluido, breakpoints justificados, componentes adaptables y preferencias del usuario.
Antes de una media query, prueba:
min(), max() y clamp()..wrapper {
inline-size: min(100% - 2rem, 72rem);
margin-inline: auto;
}
.cards {
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(min(100%, 18rem), 1fr)
);
}Se adapta sin breakpoints arbitrarios.
Reduce la ventana hasta que:
Ese punto justifica un cambio.
La base pequeña suele producir CSS más progresivo, pero un componente puede diseñarse desde su constraint principal. Lo importante es que las queries añadan cambios claros y no dupliquen todo.
.layout {
display: grid;
}El contenido debe tener un orden lógico antes de reubicarlo. Grid areas, flex order o positioning no deben crear una lectura diferente para teclado y asistencia.
Prueba 200–400% de zoom. Una interfaz responsive debe permitir reflow sin scroll bidimensional innecesario, salvo contenido que lo requiere como tablas o mapas.
h1 {
font-size: clamp(2rem, 1.2rem + 4vw, 4.5rem);
text-wrap: balance;
}Controla line length y evita texto diminuto o enorme.
.prose {
max-inline-size: 65ch;
}No reduzcas controles hasta hacerlos difíciles de activar. Espaciado, hit area y separación importan más que “caber todo”.
CSS controla layout; HTML srcset, sizes y picture controlan selección de recursos. Ambos deben describir el mismo diseño.
Usa container queries cuando una card aparece en:
No crees una variante manual para cada página si el cambio depende solo del espacio.
Responsive también incluye:
¿Por qué un breakpoint de 768px no es automáticamente correcto?
Porque el punto adecuado depende del contenido y del layout; 768px solo representa una convención o dispositivo histórico.
Tipografía inicia el bloque de lenguaje visual.