El diseño responsivo es la técnica que permite a un sitio web adaptarse a cualquier tamaño de pantalla, desde un computador hasta un celular. Si trabajas en front-end, dominar esta práctica es clave para que tu interfaz funcione tan bien en Platzi.com vista en el navegador como en un móvil de 360 píxeles.
La idea es simple: lo que ves grande en tu computador también tiene que verse impecable en pantallas pequeñas. Y para lograrlo, CSS te da una herramienta poderosa que vamos a explorar paso a paso.
¿Qué es el diseño responsivo y por qué importa en front-end?
Cuando construyes una página, no estás diseñando solo para un monitor. Estás diseñando para celulares, tablets y pantallas de todos los tamaños. El diseño responsivo es el conjunto de reglas que adaptan tu interfaz a cada dispositivo sin romper la experiencia.
Piensa en un juego con tres tarjetas alineadas horizontalmente en pantalla grande. En un celular de 360 píxeles, esas tarjetas laterales desaparecen del viewport y la interfaz se rompe. La solución es reorganizarlas verticalmente, una debajo de la otra, para que todo quepa y se lea bien [02:00].
¿Qué es el diseño responsivo? Es la práctica de adaptar el diseño de un sitio web para que funcione bien en cualquier tamaño de pantalla, ajustando elementos como columnas, alineaciones y tamaños según el dispositivo.
¿Cómo funcionan las media queries en CSS?
Las media queries son la herramienta de CSS que te permite aplicar estilos solo cuando se cumple una condición de pantalla. Se escriben con el símbolo @ seguido de la palabra media y un paréntesis donde defines el tamaño objetivo.
La propiedad max-width indica el tamaño máximo hasta el cual se aplicarán los estilos. Una forma fácil de recordarlo: léelo como un hasta. Si escribes max-width: 360px, todo lo que esté dentro de ese bloque se aplica desde 0 hasta 360 píxeles [03:30].
css
@media (max-width: 360px) {
.tarjetas {
flex-direction: column;
}
}
¿Cómo cambiar de fila a columna en mobile?
Si tu contenedor tiene display: flex, los elementos se alinean horizontalmente por defecto. Para apilarlos en pantallas pequeñas, basta con cambiar la dirección dentro de tu media query usando flex-direction: column.
Con una sola línea de código consigues que las tarjetas se reorganicen en vertical cuando el dispositivo sea de 360 píxeles o menos. Lo demás del CSS sigue funcionando igual fuera del bloque.
¿Qué hace flex-direction: column? Cambia la dirección del eje principal en un contenedor flex, apilando los elementos uno debajo del otro en lugar de uno al lado del otro.
¿Cómo combinar Flexbox y CSS Grid en un mismo diseño?
Uno de los superpoderes de CSS moderno es que un hijo dentro de un contenedor Grid puede convertirse en padre Flex. Esto significa que puedes usar Grid para la estructura general y Flexbox para alinear los elementos internos de cada celda [09:30].
Por ejemplo, si tienes un div con la clase ataques que contiene dos hijos llamados ataques-jugador y ataques-enemigo, puedes aplicar Flexbox dentro de cada uno para centrar su contenido:
display: flex activa el modelo flexible en el hijo.flex-direction: column apila los textos verticalmente.align-items: center centra el contenido en el eje horizontal.
Esa combinación te da control total sobre el layout sin reescribir estructuras. Grid maneja la cuadrícula general y Flexbox afina los detalles internos.
¿Cómo optimizar clases repetidas en CSS?
Cuando dos selectores comparten exactamente los mismos estilos, no necesitas duplicar código. Puedes agruparlos separándolos con una coma:
css
.tarjetas, .tarjetas-ataques {
display: flex;
gap: 16px;
}
Este patrón mantiene tu CSS limpio y evita repetición. Es una buena práctica que ahorra líneas y facilita el mantenimiento cuando creces el proyecto.
¿Cómo inspeccionar el responsivo en el navegador?
El navegador trae una herramienta integrada para probar tu diseño en distintos tamaños. Haz clic derecho sobre la página, selecciona inspeccionar y activa el modo de dispositivo. En la parte superior aparecerá el tamaño actual en píxeles.
La referencia más común para empezar es 360 píxeles, que corresponde al ancho promedio de un celular estándar. Hay dispositivos más pequeños, pero trabajar desde ese valor cubre la mayoría de casos reales.
Desde ahí puedes mover el inspector y ver en tiempo real cómo responde tu CSS. Si las tarjetas no se reorganizan o un botón se sale del viewport, sabes exactamente dónde aplicar una media query.
Ahora que tienes claro cómo funcionan las media queries, flex-direction y la combinación de Grid con Flexbox, te toca probarlo. Cuéntame en los comentarios qué breakpoint estás usando en tu proyecto actual.
