Responsive Design en CSS: media queries, breakpoints y mobile-first

Después de aprender Flexbox y CSS Grid, ya tenemos herramientas potentes para construir layouts. El siguiente paso es hacer que esos diseños se adapten correctamente a distintos tamaños de pantalla.

Eso es lo que buscamos con el diseño responsive.

¿Qué significa responsive?

Un diseño responsive se adapta al espacio disponible sin obligar al usuario a hacer zoom, desplazarse horizontalmente o luchar con elementos demasiado pequeños.

La misma página debería poder funcionar correctamente en:

• celulares;
• tablets;
• notebooks;
• monitores grandes.

No se trata simplemente de “hacer una versión para celular”, sino de crear una interfaz flexible.

La etiqueta viewport

Antes de trabajar con media queries, nuestro HTML debería incluir esta etiqueta dentro de head:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Esta configuración indica al navegador móvil que utilice el ancho real del dispositivo como referencia.

¿Qué es una media query?

Una media query permite aplicar reglas CSS solamente cuando se cumple determinada condición.

Por ejemplo:

@media (min-width: 768px) {
    .contenedor {
        max-width: 720px;
    }
}

Estas reglas se aplican cuando el viewport tiene al menos 768px de ancho.

min-width y max-width

Las dos condiciones más utilizadas son:

@media (min-width: 768px)

y:

@media (max-width: 767px)

min-width significa “desde este ancho en adelante”.

max-width significa “hasta este ancho”.

¿Qué es mobile-first?

El enfoque mobile-first consiste en escribir primero los estilos para pantallas pequeñas y agregar mejoras a medida que aumenta el espacio disponible.

Por ejemplo:

.menu {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

Luego, para pantallas más grandes:

@media (min-width: 768px) {
    .menu {
        flex-direction: row;
    }
}

Así partimos de una experiencia sencilla para celular y ampliamos el diseño progresivamente.

Breakpoints

Un breakpoint es un punto en el que decidimos cambiar parte del diseño.

No existe una lista universal que deba usarse siempre. Lo ideal es elegirlos según el momento en que el contenido deja de verse bien.

Como referencia inicial, pueden aparecer valores como:

576px
768px
992px
1200px

Pero no conviene diseñar pensando solamente en modelos concretos de dispositivos.

Ejemplo: tarjetas responsive con Flexbox

HTML:

<section class="cursos">

    <article class="tarjeta">
        <h2>HTML</h2>
        <p>Estructura web.</p>
    </article>

    <article class="tarjeta">
        <h2>CSS</h2>
        <p>Estilos y diseño.</p>
    </article>

    <article class="tarjeta">
        <h2>JavaScript</h2>
        <p>Interacción.</p>
    </article>

</section>

CSS:

.cursos {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 768px) {
    .cursos {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .tarjeta {
        flex: 1 1 280px;
    }
}

Ejemplo responsive con CSS Grid

Grid puede resolver muchos diseños responsive con muy pocas reglas:

.galeria {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

En este caso, el navegador crea tantas columnas como entren, sin necesidad de media queries para cada tamaño.

Imágenes responsive

Una imagen puede desbordar su contenedor si tiene un ancho mayor que la pantalla.

Una regla muy habitual es:

img {
    max-width: 100%;
    height: auto;
}

Así la imagen nunca supera el ancho disponible y conserva su proporción.

Contenedores fluidos

Un patrón frecuente es combinar porcentaje y ancho máximo:

.contenedor {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

Esto permite que el contenido use gran parte de la pantalla en dispositivos pequeños, pero evita que se vuelva demasiado ancho en monitores grandes.

Tipografía responsive

También podemos adaptar tamaños de texto.

h1 {
    font-size: 2rem;
}

@media (min-width: 768px) {
    h1 {
        font-size: 3rem;
    }
}

clamp()

CSS moderno ofrece clamp(), que permite definir un valor mínimo, uno flexible y uno máximo.

h1 {
    font-size: clamp(2rem, 5vw, 4rem);
}

Esto significa que el tamaño podrá crecer con el viewport, pero nunca será menor que 2rem ni mayor que 4rem.

Espaciados adaptativos

clamp() también puede utilizarse para padding y márgenes:

.hero {
    padding: clamp(2rem, 6vw, 6rem) 1.5rem;
}

Menú responsive simple

HTML:

<nav class="menu">
    <a href="#">Inicio</a>
    <a href="#">HTML</a>
    <a href="#">CSS</a>
    <a href="#">Contacto</a>
</nav>

CSS mobile-first:

.menu {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .menu {
        flex-direction: row;
        gap: 2rem;
    }
}

Ocultar elementos según el tamaño

Es posible ocultar elementos con media queries:

@media (max-width: 767px) {
    .solo-escritorio {
        display: none;
    }
}

Pero conviene no abusar de esta técnica. Si el contenido es importante, normalmente debería seguir estando disponible.

Media queries por orientación

También podemos detectar orientación:

@media (orientation: landscape) {
    .galeria {
        grid-template-columns: repeat(3, 1fr);
    }
}

Preferencias del usuario

Las media queries también pueden consultar ciertas preferencias del sistema.

Por ejemplo, para reducir animaciones:

@media (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto;
    }
}

Esto es útil para mejorar accesibilidad.

Evitar el scroll horizontal

Un problema común en móviles es que algún elemento sea más ancho que la pantalla.

Las causas frecuentes son:

• anchos fijos demasiado grandes;
• imágenes sin max-width;
• tablas muy anchas;
• contenedores con padding y tamaños mal calculados;
• texto o código que no puede ajustarse.

La solución correcta es encontrar el elemento que desborda. No conviene ocultar el problema simplemente agregando overflow-x: hidden al sitio completo.

Tablas en pantallas pequeñas

Las tablas pueden necesitar desplazamiento horizontal controlado.

HTML:

<div class="tabla-responsive">
    <table>
        ...
    </table>
</div>

CSS:

.tabla-responsive {
    overflow-x: auto;
}

Un layout completo mobile-first

HTML:

<div class="pagina">

    <header class="cabecera">
        <h1>Club Programador</h1>
    </header>

    <main class="contenido">

        <article>
            <h2>Aprender CSS</h2>
            <p>Contenido principal.</p>
        </article>

        <aside>
            Recursos relacionados
        </aside>

    </main>

</div>

CSS:

.pagina {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.contenido {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 900px) {
    .contenido {
        grid-template-columns: 2fr 1fr;
    }
}

En móvil existe una sola columna. Cuando hay espacio suficiente, aparece una segunda columna para el contenido lateral.

Probar distintos tamaños

No alcanza con reducir la ventana una sola vez.

Conviene probar:

• pantallas muy angostas;
• anchos intermedios;
• tablets;
• escritorio;
• contenido más largo de lo esperado;
• zoom del navegador.

Las herramientas de desarrollo del navegador permiten simular distintos tamaños de viewport.

No diseñar para dispositivos específicos

Un error común es pensar:

celular = 375px
tablet  = 768px
PC      = 1200px

En realidad existen muchísimos tamaños intermedios.

Los breakpoints deberían aparecer donde el diseño los necesita, no solamente donde una tabla de dispositivos lo indica.

Errores comunes

• olvidar la etiqueta viewport;
• crear una versión de escritorio y después intentar “achicarla” a la fuerza;
• usar demasiados breakpoints;
• depender exclusivamente de anchos fijos;
• no permitir que Flexbox haga wrap;
• no usar Grid flexible cuando corresponde;
• dejar imágenes con ancho fijo;
• ocultar contenido importante en móvil;
• elegir breakpoints solamente por modelos de dispositivos;
• no probar anchos intermedios.

Ejercicio para practicar

Partiendo de:

<section class="productos">

    <article class="producto">
        <h2>Producto 1</h2>
        <p>Descripción.</p>
    </article>

    <article class="producto">
        <h2>Producto 2</h2>
        <p>Descripción.</p>
    </article>

    <article class="producto">
        <h2>Producto 3</h2>
        <p>Descripción.</p>
    </article>

</section>

Intentá crear un diseño que:

• muestre una columna en pantallas pequeñas;
• muestre dos columnas en un ancho intermedio;
• muestre tres columnas cuando haya espacio suficiente;
• utilice gap;
• mantenga un ancho máximo para el contenido;
• use tipografía adaptable con clamp();
• no genere scroll horizontal.

Qué aprendimos

• qué significa responsive;
• etiqueta viewport;
• media queries;
• min-width y max-width;
• mobile-first;
• breakpoints;
• Flexbox responsive;
• Grid responsive;
• imágenes fluidas;
• contenedores fluidos;
• clamp();
• orientación y preferencias del usuario;
• cómo evitar desbordes horizontales.

Seguí aprendiendo CSS

La guía anterior es:

CSS Grid: filas, columnas, gap, fr, repeat y minmax paso a paso

El próximo paso será estudiar el posicionamiento en CSS: static, relative, absolute, fixed, sticky y z-index.

---

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender desarrollo web, podés apoyar a Club Programador.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal