Los breakpoints son los anchos de viewport en los que un diseño responsive cambia de estructura. Un conjunto habitual y seguro es unos 640 px para móviles grandes, 768 px para tablets, 1024 px para portátiles pequeños y 1280 px para escritorio, escritos como consultas min-width en rem. Lo mejor es tomar ese conjunto como punto de partida y mover los breakpoints adonde tu propio contenido empieza a verse mal, en lugar de perseguir tamaños de dispositivos.
Breakpoints habituales de un vistazo
| Rango | Breakpoint típico | Qué hay aquí |
|---|---|---|
| Móviles pequeños | estilos base (sin consulta) | Móviles de 320–375 px de ancho |
| Móviles grandes | 480–640 px | Móviles de 390–440 px en vertical, móviles en horizontal |
| Tablets | 768 px | iPad mini y tablets en vertical |
| Portátiles pequeños, tablets en horizontal | 1024 px | iPad en horizontal, portátiles de 13” con zoom |
| Escritorio | 1280 px | La mayoría de las pantallas de portátil y sobremesa |
| Escritorio ancho | 1440–1536 px | Monitores grandes |
Escríbelos en rem (40rem, 48rem, 64rem, 80rem) para que se desplacen cuando el usuario aumenta el tamaño de letra por defecto.
Cómo definen los breakpoints los frameworks populares
| Framework | Breakpoints (min-width) |
|---|---|
| Tailwind CSS v4 | 640, 768, 1024, 1280, 1536 px |
| Bootstrap 5 | 576, 768, 992, 1200, 1400 px |
| Clases de tamaño de ventana de Material Design 3 | compact < 600, medium 600–839, expanded 840–1199, large 1200–1599, extra-large ≥ 1600 (dp) |
En líneas generales coinciden en la forma: un salto a tablet en torno a 600–768, uno a escritorio en torno a 1000–1200 y uno o dos tamaños anchos. Detalles: breakpoints de Tailwind y breakpoints de Bootstrap.
Por qué los breakpoints por dispositivo envejecen mal
Es tentador poner los breakpoints en los anchos exactos de los dispositivos: 375 para un iPhone, 390 para uno más nuevo, 414 para un modelo Plus. El problema es que los dispositivos cambian cada año. Solo los iPhone actuales van de 375 a 440 píxeles CSS de ancho (mira la tabla de tamaños de pantalla de iPhone), los Android añaden muchos anchos más y los plegables y las ventanas en pantalla dividida caen en cualquier punto.
Un diseño que solo funciona en anchos concretos de dispositivos se romperá en los intermedios. Los breakpoints deben marcar dónde tiene que cambiar el diseño, y entre ellos el diseño debe ser fluido.
Cómo elegir breakpoints a partir del contenido
- Construye primero el diseño más estrecho, a unos 320 px.
- Ensancha el viewport poco a poco en el modo Responsive de Chrome DevTools.
- Para cuando el diseño empiece a verse mal: las líneas se alargan demasiado, las tarjetas se estiran, cabe una segunda columna o la navegación podría ir en una fila.
- Añade un breakpoint en ese ancho, redondeado a un valor razonable en rem.
- Repite hasta el diseño más ancho que soportes.
Normalmente acabas con entre tres y cinco breakpoints. Si tienes más de seis, probablemente algunos estén arreglando problemas de componentes que resolvería mejor una container query o una técnica fluida.
Menos breakpoints con técnicas fluidas
El CSS moderno elimina la necesidad de muchos breakpoints:
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))añade y quita columnas automáticamente.flex-wrap: wrapcon unflex-basishace que los elementos salten de línea cuando se quedan sin espacio.clamp()escala tamaños de letra y espaciados con suavidad:font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem).width: min(100% - 2rem, 70rem)crea en una línea un contenedor con margen lateral y ancho máximo.
Reserva los breakpoints para cambios estructurales: estilo de navegación, número de columnas de la página, posición de la barra lateral.
Breakpoints y tablets
En las tablets es donde más se notan las decisiones sobre breakpoints. Un iPad en vertical mide entre 744 y 1032 px de ancho según el modelo, así que puede quedar a cualquier lado de 768 o de 1024. Al girarlo cruza otro breakpoint. Prueba las tablets en ambas orientaciones y recuerda que Safari en iPad suele pedir la versión de escritorio. Más en cómo ver una web como en un iPad en Chrome.
Cómo probar tus breakpoints
- Activa Show media queries en la barra de dispositivos de DevTools para ver cada breakpoint como una barra; haz clic en una para saltar a ese ancho.
- Prueba cada breakpoint en su ancho exacto y 1 px por debajo.
- Revisa móviles y tablets concretos, no solo anchos. Mobile View Extension con preajustes de dispositivos es la forma más rápida de recorrer páginas en varios tamaños.
El método completo está en cómo hacer un test responsive.
Preguntas frecuentes
¿Cuáles son los breakpoints estándar del diseño responsive?
No hay un estándar oficial. Los valores habituales son 640, 768, 1024 y 1280 px (Tailwind) o 576, 768, 992, 1200 y 1400 px (Bootstrap). Elige un conjunto y úsalo de forma coherente.
¿Qué breakpoint uso para móvil?
En CSS mobile first, los móviles no necesitan breakpoint: reciben los estilos base. El primer breakpoint, normalmente entre 480 y 640 px, marca dónde el diseño puede empezar a usar más espacio.
¿Cuántos breakpoints debería tener una web?
Lo típico es entre tres y cinco. Usa diseños fluidos entre ellos y añade un breakpoint solo donde el contenido necesite un cambio estructural.