Breakpoints CSS
Media Queries enseñó cómo se activa @media. Imágenes responsive enseñó cómo encajan las fotos en los huecos que abren esas queries. Los breakpoints son el plan: una lista corta de anchos donde cambia la estrategia de layout — columnas, navegación, espaciado — nombrada una vez y reutilizada para que todo el sitio avance al unísono.
Kit de breakpoints
📊 Breakpoints de un vistazo
| Pieza | Trabajo habitual |
|---|---|
| Breakpoint | Ancho planificado donde cambian las reglas de layout |
| Elección según contenido | Elige anchos donde el diseño se siente apretado o vacío — no SKUs de móvil |
Pasos con nombre (sm, md, lg…) |
Mismo token en todas partes; auditorías y equipo más fáciles |
| Escalera mobile-first | Base = estrecha; pasos min-width añaden mejoras |
| Fluido entre pasos | %, rem, Flex/Grid antes de otra query |
| Conjunto documentado | Lista corta en comentarios o tokens — no veinte valores sueltos |
Un breakpoint no es «el iPhone». Es «cuando la barra lateral ya no cabe junto al artículo» o «cuando la nav puede pasar a fila». Mide el contenido y escribe un paso compartido.
Contenido primero — no catálogo de dispositivos
Redimensiona el navegador hasta que algo falle: líneas demasiado largas, tarjetas aplastadas, menú hamburguesa cuando aún hay espacio. Anota ese ancho en rem (o em). Eso gana a copiar una tabla de píxeles de marketing.
/* Break when article + sidebar need two columns (~48rem content width) */
@media (min-width: 48rem) {
.layout {
display: grid;
grid-template-columns: 1fr 16rem;
gap: 1.5rem;
}
}
Listas dispositivo a dispositivo envejecen mal — cada año salen móviles nuevos. Pocos pasos basados en contenido duran más y mantienen la hoja de estilos legible.
Nombra los pasos — reutiliza los mismos anchos
Para un sitio típico bastan dos a cuatro pasos. Pon nombres cortos en comentarios (o custom properties con los valores de ancho). Cada componente que «arranca el layout ancho» debe usar el mismo número — no 720px en la cabecera y 768px en la cuadrícula.
:root {
--bp-md: 40rem;
--bp-lg: 64rem;
}
/* Usage still needs a literal in @media in classic CSS —
keep tokens and queries in sync, or use a preprocessor/build step. */
@media (min-width: 40rem) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 64rem) {
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
En CSS clásico @media no puede leer custom properties como condición en todos los navegadores como quisieras — trata los tokens de :root como documentación y ayuda para JS/herramientas, y mantén los literales coincidentes alineados. Lo que importa: una escalera compartida, no anchos aleatorios por archivo.
Escalera mobile-first
Escribe defaults estrechos sin queries. Cada paso min-width añade columnas, tipografía mayor o nav horizontal. No reescribas toda la página en cada paso — cambia una capa clara.
.nav {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.card-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 40rem) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 64rem) {
.nav {
flex-direction: row;
align-items: center;
gap: 1.5rem;
}
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
Ajuste desktop-first (cuando partes de ancho)
Si el proyecto ya entrega un layout ancho, queries max-width pueden colapsar columnas en viewports pequeños. Sé coherente: no mezcles min-width y max-width al azar en el mismo componente sin motivo.
.sidebar {
width: 18rem;
float: left;
margin-right: 1.5rem;
}
@media (max-width: 39.99rem) {
.sidebar {
float: none;
width: auto;
margin-right: 0;
}
}
Prefiere una dirección por proyecto. Media Queries ya cubrió la sintaxis min-width vs max-width — aquí la regla es estrategia: pasos compartidos, misma filosofía en todas partes.
Un paso, varios componentes
Cuando se activa --bp-lg (o 64rem), actualiza nav, grid y espaciado juntos si pertenecen al mismo capítulo de layout. Anchos «casi iguales» dispersos provocan bugs: la cabecera cambia antes que el grid principal.
@media (min-width: 64rem) {
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.main {
display: grid;
grid-template-columns: minmax(0, 1fr) 18rem;
gap: 2rem;
}
}
Fluido primero — queries después
Entre breakpoints, Flex, Grid, % y rem ya deberían absorber cambios pequeños de ancho. Añade query solo cuando haga falta un cambio estructural (nuevo número de columnas, patrón de nav distinto). Más queries no es más profesional.
Pruébalo tú
- Redimensiona una página de práctica y anota dos anchos donde el layout de verdad debe cambiar.
- Convierte esos anchos a
remy nómbralos (md,lg). - Aplica los mismos dos valores
min-widthal grid de tarjetas y a la nav. - Busca en el CSS otros números
min-width/max-width— fusiona casi duplicados. - Quita una query innecesaria mejorando la base fluida (gap,
minmax, wrapping).
Errores frecuentes
- Catálogo de cada ancho de móvil en lugar de puntos de dolor del contenido
- Doce queries solapadas con píxeles ligeramente distintos
- Cabecera en
768px, main en800px, pie en720px - Saltarse CSS fluido y resolver cada ajuste con otro
@media - Volver a enseñar llaves
@mediaosrcsetaquí en vez de planificar la escalera
Resumen
- Los breakpoints son pasos de layout planificados — nombra un conjunto corto y reutilízalo
- Elige anchos por estrés del contenido, no por tablas de marketing de dispositivos
- Prefiere escalera
min-widthmobile-first; una dirección por proyecto - Mantente fluido entre pasos; query solo para cambios estructurales
- Esto cierra el módulo Responsive — siguiente: Box Shadow en Effects & Motion
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior