Hoy · Hoja de ruta
- 1. Aprende: Por qué la mayoría de las adaptaciones no necesitan media query, y dónde se ponen las que sí.
- 2. Haz: Rompe tu propia página a cinco anchuras y arregla lo que encuentres.
- 3. Comprueba: No hay scroll horizontal en ninguna de las cinco.
Antes de empezar · 5 minutos, sin apuntes
- ¿Qué hacen juntos
auto-fit,minmax()y1fr? - ¿Cuándo elegirías Flexbox y cuándo Grid?
- Este Grid no se adapta:
repeat(4, 250px). Propón una estrategia, no una cifra nueva.
Una web no se diseña para 1920 × 1080
Quien entre a tu sitio puede hacerlo desde un móvil, una tablet, un portátil, un monitor grande, media pantalla en una ventana dividida, o un dispositivo que todavía no existe. No puedes enumerarlos.
Por eso el orden correcto es este, y casi nadie lo respeta:
- Primero, que el diseño se adapte solo
- Después, media queries solo donde el contenido ya no funcione
Lo que ya se adapta sin media queries
Llevas cuatro semanas construyendo herramientas que hacen esto:
| Herramienta | Qué adapta sola |
|---|---|
max-width y min() |
La anchura de los contenedores |
flex-wrap |
El salto de línea cuando no caben |
auto-fit con minmax() |
El número de columnas del catálogo |
clamp() |
El tamaño de los titulares |
gap |
La separación, sin cuentas |
Si las usas bien, buena parte de tu sitio ya es responsive y no lo sabías. Las media queries son para lo que queda.
Mobile first
Mobile first
Escribir primero los estilos de la disposición más sencilla —una columna— y añadir después las variantes para pantallas anchas con min-width, en lugar de al revés.
/* Base: una columna. Vale para cualquier pantalla. */
.catalogo {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (width >= 48rem) {
.catalogo { grid-template-columns: repeat(2, 1fr); }
}
@media (width >= 70rem) {
.catalogo { grid-template-columns: repeat(3, 1fr); }
}Mobile first parte de una columna y añade capacidad solo cuando el contenido dispone de espacio suficiente.
La razón no es ideológica: el caso de una columna es el más simple, y partir de lo simple para añadir complejidad da menos código que partir de lo complejo para irlo deshaciendo.
La sintaxis (width >= 48rem) es la moderna y se lee sola. Encontrarás también la clásica, (min-width: 48rem), que significa lo mismo.
Los breakpoints no son teléfonos
No busques las medidas del iPhone 15 ni del Galaxy de turno. Esa lista cambia cada año y nunca está completa.
Un breakpoint va donde tu contenido deja de funcionar: donde el menú ya no cabe, donde una columna se queda demasiado estrecha para leerse, donde la tarjeta se rompe. Esa anchura la encuentras estirando la ventana hasta que se ve mal, y es distinta en cada proyecto porque cada proyecto tiene otro contenido.
Por eso en la sesión 10 te pedí que anotaras a qué anchura empezaba a verse mal el catálogo. Ese número vale más que cualquier lista de dispositivos.
Tarea 12 · Rompe tu página
Con DevTools en modo dispositivo, recorre tu sitio a estas anchuras:
320 px móvil pequeño
375 px móvil habitual
768 px tablet
1024 px portátil
1440 px escritorioBusca a continuación, en las cuatro páginas:
| Problema | ¿Dónde aparece? | A qué anchura | Cómo lo has resuelto |
|---|---|---|---|
| Contenido que se sale | |||
| Scroll horizontal | |||
| Navegación que no cabe | |||
| Imágenes demasiado grandes | |||
| Columnas demasiado estrechas | |||
| Texto difícil de leer |
Después corrígelos, intentando primero sin media query. Si lo resuelves con flex-wrap, con minmax() o con clamp(), mejor que con un breakpoint: no hay que mantenerlo.
Estoy atascado · tengo scroll horizontal y no sé de dónde sale
Es de los fallos más frustrantes, porque el culpable puede estar en cualquier sitio. Sospechosos por orden de frecuencia:
- Una imagen sin
max-width: 100%. - Un
widthfijo en píxeles mayor que la pantalla. - Un elemento con
100%más unpadding, sinbox-sizing: border-box. - Una tabla, o un bloque de código, que no cabe y no tiene su propio
overflow-x: auto. - Un
marginnegativo.
Para localizarlo rápido, en la consola de DevTools puedes recorrer los elementos y ver cuál es más ancho que el documento. O, a lo bruto: ve dando outline: 1px solid red a secciones enteras hasta ver cuál se sale.
Checkpoint · fin de la sesión 12 y de la semana 4
- Tu catálogo se adapta sin media queries.
- No hay scroll horizontal a 320 px en ninguna página.
- Cada media query que has escrito responde a un problema concreto que puedes nombrar.
- Ninguno de tus breakpoints procede de un modelo de teléfono.
- Sabes justificar, para cada bloque, si es Flexbox o Grid.
Antes de cerrar · 2 minutos, sin mirar
- ¿Qué significa mobile first y por qué se hace así?
- ¿Dónde debe ir un breakpoint?
- Nombra tres herramientas que adaptan sin necesitar media query.
Ver respuestas
1 · Escribir primero la disposición más simple y añadir después las de pantallas anchas. Porque partir de lo simple y añadir sale más corto que partir de lo complejo y deshacer.
2 · Donde el contenido deja de funcionar, no donde está un modelo de dispositivo.
3 · max-width, flex-wrap, auto-fit con minmax(), clamp(), gap. Bastan tres.
Microprueba semanal 4 · 5–10 minutos
Individual, sin IA y sin apuntes.
- Decide entre Flexbox, Grid o flujo normal para tres interfaces que no has visto.
- Escribe un Grid adaptable sin media query.
- Una página desborda a 360 px: enumera tres comprobaciones antes de añadir un breakpoint.