Diseño responsivo

Por qué importa

Un diseño pensado solo para una pantalla de computadora ancha se puede ver roto en un celular: texto diminuto, elementos que no entran, un menú de navegación imposible de tocar con el dedo. "Diseño responsivo" significa que la página se adapta al tamaño de pantalla de quien la visita, en vez de asumir un solo tamaño fijo.

La herramienta principal para lograrlo son las media queries: reglas de CSS que solo se aplican cuando se cumple una condición sobre la pantalla, típicamente su ancho.

Media queries

.columna {
    width: 33%;
}

@media (max-width: 768px) {
    .columna {
        width: 100%;
    }
}

La primera regla siempre se aplica. La segunda, adentro de @media (max-width: 768px), solo se aplica cuando el ancho de la pantalla es 768px o menos — típicamente tablets y celulares. En una pantalla más ancha que eso, esa regla se ignora directamente.

768px es un punto de corte muy común (se lo suele llamar breakpoint), pero no es un número mágico — se puede usar cualquier ancho que tenga sentido para el diseño en cuestión.

Flexbox + media query: un menú que se adapta

El caso más común en la práctica: un menú de navegación horizontal (con flexbox, ver Lección 10) que en pantallas chicas se convierte en una lista vertical, sin necesitar dos menús distintos — el mismo HTML, con CSS distinto según el ancho.

.menu-links {
    display: flex; /* en fila, en pantallas anchas */
}

@media (max-width: 768px) {
    .menu-links {
        flex-direction: column; /* en columna, en pantallas chicas */
    }
}

Este patrón — layout ancho con flexbox, y una media query que cambia flex-direction o achica anchos — resuelve la enorme mayoría de los casos reales de diseño responsivo, sin necesitar nada más avanzado.