¿Qué es un breakpoint en diseño web?
Un breakpoint es el ancho de viewport donde el diseño de un sitio responsivo cambia para mantener su contenido legible y usable. Se define con media queries de CSS: por ejemplo, un sitio puede pasar de 3 columnas en escritorio a una sola por debajo de 768px, y así un mismo diseño se adapta a celulares, tabletas y computadoras.
Más sobre los breakpoints [acf.faqs] 1. Q: ¿Cuál es la diferencia entre un breakpoint y una media query? A: Una media query es la regla de CSS que evalúa las condiciones del viewport, como @media (min-width: 768px). Un breakpoint es el valor de ancho específico en el que introduces una. No toda media query contiene un breakpoint: una query de preferencias como @media (prefers-reduced-motion: reduce) no tiene umbral de ancho. 2. Q: ¿Un breakpoint en diseño web es lo mismo que un breakpoint en programación? A: No. En desarrollo de software, un breakpoint es un marcador donde el depurador pausa la ejecución del código para que puedas inspeccionar qué está pasando. En diseño web, es un ancho de viewport donde cambia un diseño responsivo. Es la misma palabra, pero con funciones que no tienen nada que ver. 3. Q: ¿Un breakpoint es un solo ancho o un rango de anchos? A: Los dos usos son comunes. Técnicamente, un breakpoint es el valor de ancho único donde cambia el diseño. En la práctica, los diseñadores suelen usar la palabra para todo el rango de tamaños de pantalla que muestra un mismo diseño, porque un rango es lo que especifican en las media queries.
Los breakpoints son las piezas que hacen funcionar el diseño responsivo. Define unos cuantos bien elegidos y la misma página se mantiene legible en todo, desde un celular hasta un monitor panorámico.
Un enfoque mobile-first usa estilos base para las pantallas chicas y agrega media queries de min-width en cada breakpoint para los diseños más grandes. Empiezas con un diseño sencillo para pantallas pequeñas y lo enriqueces conforme la pantalla se hace más ancha.
Cómo funcionan los breakpoints en CSS
Un breakpoint es el punto donde una media query de CSS entra en efecto. Como lo explica la documentación de diseño responsivo de MDN, los puntos donde se introduce una media query se conocen como breakpoints. Tu hoja de estilos aplica un conjunto de reglas de diseño de forma predeterminada, y la media query cambia a reglas distintas cuando el viewport, el área visible de la ventana del navegador, alcanza el ancho que elegiste.
Por ejemplo, `@media (min-width: 768px) { … }` aplica sus reglas solo cuando el viewport mide al menos 768px de ancho. Puedes usarla para pasar de una sola columna en celulares a un diseño de 2 columnas en tabletas. Una query de min-width parte de las pantallas chicas hacia arriba (mobile-first), mientras que una de max-width parte del diseño de escritorio hacia abajo (desktop-first). Bootstrap define toda su cuadrícula mobile-first con queries de min-width.
Valores comunes de breakpoints
No existe un estándar oficial; ninguna especificación dice dónde debe ir un breakpoint. Dos puntos de referencia muy usados:
- Nielsen Norman Group (en inglés) (abril de 2024) describe 4 rangos comunes: extrachico, hasta unos 500px (celulares); chico, de 500px a 1200px (tabletas); mediano, de 1200px a 1400px (laptops); y grande, de 1400px en adelante (monitores externos grandes).
- Bootstrap 5.3 (en inglés) incluye 6 valores predeterminados: un diseño base por debajo de 576px y después 5 valores de min-width: 576px (sm), 768px (md), 992px (lg), 1200px (xl) y 1400px (xxl).
Tómalos como puntos de partida. Los valores finales debe marcarlos tu contenido, no la tabla de dispositivos de alguien más.
Cómo elegir tus breakpoints
Coloca los breakpoints donde tu contenido empieza a romperse, no en anchos fijos de dispositivos. Cambia el tamaño de tu navegador de angosto a ancho y fíjate en el momento en que las líneas se alargan demasiado, las columnas se aplastan o la navegación se amontona; ahí es donde va un breakpoint. MDN recomienda este enfoque guiado por el contenido porque los breakpoints pensados para dispositivos específicos quedan obsoletos cada vez que salen pantallas de nuevos tamaños. En la práctica, Nielsen Norman Group reporta que los diseñadores suelen contemplar solo 2 o 3 breakpoints.
Algunos hábitos los mantienen manejables:
- Ten claro qué suele cambiar en un breakpoint: la navegación se pliega bajo un ícono de hamburguesa, las barras laterales pasan a la columna principal y las filas muestran menos tarjetas o productos.
- Mantén los valores consistentes en todo el sitio para que los componentes no cambien en anchos ligeramente distintos.
- Prueba en anchos intermedios entre tus breakpoints, no solo en ellos; ahí se esconden los diseños aplastados.
- Revisa también en celulares y tabletas reales, no solo en una ventana de escritorio redimensionada.
