CSS responsive clásico: media queries y centrado con Flexbox
Ejemplos históricos de breakpoints, orientación y centrado que siguen explicando la base de muchos temas responsive.
- Revisado
- Compatibilidad
- CSS3; navegadores modernos y temas legacy
- Lectura
- 2 min
- Autor
- Gabriel — infinit8
Antes de los sistemas de diseño y las container queries, era habitual mantener bloques de media queries por ancho. La idea sigue siendo válida, aunque hoy conviene partir del diseño pequeño y añadir complejidad con min-width.
De breakpoints descendentes a mobile first
Los apuntes originales reducían anchuras a 980, 768 y 480 píxeles. Esta versión conserva la progresión, pero coloca la base fuera de la consulta y amplía el diseño cuando existe espacio.
.layout {
width: min(100% - 2rem, 72rem);
margin-inline: auto;
}
@media (min-width: 48rem) {
.layout { display: grid; grid-template-columns: 2fr 1fr; }
}
@media (min-width: 62rem) {
.layout { gap: 2rem; }
}La orientación describe el viewport
orientation: landscape compara el ancho y el alto del viewport; no confirma que el dispositivo físico se haya girado. Un teclado virtual también puede cambiar esa relación.
@media (orientation: landscape) and (max-height: 32rem) {
.toolbar { position: static; }
}Centrado vertical que sobrevivió al tiempo
El patrón de Flexbox guardado en las notas sigue siendo una solución clara para centrar contenido en ambos ejes.
.button-content {
display: flex;
align-items: center;
justify-content: center;
}Preguntas frecuentes
¿Debo usar anchos ligados a modelos de dispositivo?
No. Elige los puntos de ruptura donde el contenido deja de respirar o la composición falla.
¿Las media queries están anticuadas?
No. Siguen siendo fundamentales; hoy conviven con Grid, Flexbox y container queries.
Referencias y revisión
Contenido contrastado con documentación oficial. Comprueba siempre el comportamiento en un entorno de pruebas antes de desplegar cambios.