El responsive design es la técnica que permite que una página web se vea bien en cualquier dispositivo, desde un mobile hasta una computadora de escritorio. En CSS lo logramos con media queries, validaciones que adaptan los estilos según el tamaño de pantalla. Aquí aprenderás a aplicarlos siguiendo el enfoque mobile first, ideal para quienes están construyendo sus primeros proyectos web.

¿Qué es mobile first y por qué empezar por ahí?

Trabajar mobile first significa diseñar primero pensando en la pantalla más pequeña y luego escalar hacia tablet y desktop. Esta lógica te obliga a priorizar el contenido más importante, porque en mobile no tienes el mismo espacio que en una computadora [01:30].

Si empiezas al revés, terminas con páginas saturadas que no sabes cómo acomodar en pantallas chicas. Y ahí es donde el usuario sufre: hace zoom, scroll infinito o simplemente se va.

¿Qué es responsive design? Es una técnica de diseño web que adapta la apariencia de una página al tamaño del dispositivo, garantizando una buena experiencia tanto en mobile como en tablet o desktop.

¿Cómo se construyen los estilos base en mobile first?

La idea es escribir primero el CSS pensando en mobile, sin condicionales, y luego agregar las variaciones para pantallas más grandes.

Contenedor principal con flexbox

En la clase .container se aplica display: flex con flex-direction: column, un gap: 10px y margin-bottom: 20px. Así los elementos se apilan verticalmente, que es el comportamiento natural en mobile [03:40].

Las cajas internas (.box) reciben color de fondo #3498db, texto blanco, padding: 20px y text-align: center para que el contenido respire y se lea bien.

Navegación pensada para hamburguesa

La .nav lleva un fondo oscuro #2c3e50 y la lista interna (.nav-list) usa list-style: none, display: flex y flex-direction: column. ¿Por qué columna? Porque en mobile la navegación se despliega desde un ícono de hamburguesa hacia abajo [05:50].

Las anclas reciben display: block, color blanco, padding: 10px y text-decoration: none.

Tipografía con REM

Usar REM en lugar de píxeles permite que la tipografía escale según el dispositivo y respete los settings de accesibilidad del usuario. En mobile, .responsive-title se define con font-size: 1.5rem (≈24 píxeles) y .responsive-text con 1rem [07:20].

¿Cómo funcionan los media queries en CSS?

Un media query es una validación que dice: si la pantalla cumple cierta condición, aplica estos estilos. La sintaxis básica es:

css @media (min-width: 768px) { /* estilos para tablet hacia arriba */ }

El número clave es el min-width, que define a partir de qué ancho de viewport se activan las reglas internas [09:10].

¿Qué es un viewport? Es el área visible de la pantalla del dispositivo. Su ancho cambia según si estás en mobile, tablet o desktop, y es lo que los media queries miden para decidir qué estilos aplicar.

Media query para tablet a partir de 768px

A partir de 768 píxeles, el .container cambia a flex-direction: row para que los elementos se acomoden en fila aprovechando el espacio extra. Las .box reciben flex: 1 para ocupar proporcionalmente el contenedor padre.

La .nav-list también pasa a flex-direction: row, mostrando los links uno al lado del otro sin necesidad del menú hamburguesa. Se oculta .mobile con display: none y se muestra .tablets con display: block, fondo naranja #F39C12 y padding [11:30].

El título crece a font-size: 2rem (≈32 píxeles), porque ya hay espacio para que destaque más.

Media query para desktop a partir de 1024px

Aquí se oculta .tablets con display: none y se muestra .desktop con fondo verde y texto blanco. El .responsive-title sube a 3rem y el .responsive-text a 1.2rem (≈19.2 píxeles) [13:50].

Un detalle importante: si los estilos no se aplican, revisa el nombre de la clase. En el ejemplo apareció un typo en tablets que impedía que el bloque se ocultara correctamente [15:20].

¿Cuándo usar min-width vs max-width? Con mobile first usas min-width porque escribes los estilos base para mobile y agregas reglas para pantallas más grandes. Con desktop first usarías max-width para reducir hacia abajo.

¿Qué breakpoints conviene usar?

Los puntos de quiebre más comunes para empezar son:

• 768px para tablets.
• 1024px para desktop o computadoras.
• Por debajo de 768px se mantienen los estilos mobile base.

Estos valores no son una regla rígida, pero cubren la mayoría de dispositivos reales y te dan una base sólida para iterar después según el diseño que estés trabajando.

Cuéntame en los comentarios qué breakpoints sueles usar tú y si prefieres trabajar mobile first o desktop first en tus proyectos.