01 Aprende probando
El diseño responsivo hace que una misma página se adapte al espacio disponible. Mueve el control, cambia de dispositivo y observa cuándo el contenido decide reorganizarse.
SIMULADOR DE VIEWPORT
@media (max-width: 599px)Las tarjetas usan una sola columna y la navegación se simplifica.
02 De dónde nace
Durante años se diseñó pensando en monitores de escritorio con medidas fijas. La llegada de teléfonos, tabletas y pantallas muy distintas obligó a cambiar la pregunta: en vez de “¿para qué dispositivo diseño?”, empezamos a preguntar “¿cómo debe responder el contenido al espacio que tiene?”.
EL PROBLEMA INICIAL
Los sitios solían construirse con tablas y anchos fijos, por ejemplo 760 o 960 píxeles. Funcionaban en el monitor previsto, pero en una pantalla menor aparecía desplazamiento horizontal.
.pagina {
width: 960px;
margin: 0 auto;
}Ethan Marcotte publicó Responsive Web Design en A List Apart el 25 de mayo de 2010. Reunió tres ideas que ya estaban madurando: cuadrículas fluidas, imágenes flexibles y media queries.
Consultar el artículo original ↗03 La idea central
Significa construir reglas flexibles para que el contenido conserve su jerarquía, legibilidad y facilidad de uso mientras cambia el espacio disponible.
El contenido crece y se contrae con porcentajes, fracciones y límites razonables.
width: min(100% - 2rem, 72rem);Imágenes, texto y componentes nunca deberían desbordar su contenedor.
img { max-width: 100%; height: auto; }Las media queries cambian el diseño cuando el contenido realmente lo necesita.
@media (min-width: 48rem) { … }RECETA EN 5 PASOS
Primero permite que el navegador use el ancho real del dispositivo. Sin esta etiqueta, un teléfono puede simular una ventana de escritorio y reducir toda la página.
<meta name="viewport"
content="width=device-width, initial-scale=1">COMANDOS ESENCIALES
@media (min-width: 48rem)Activa estilos cuando se cumple una condición del viewport.
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));Crea tantas columnas como quepan sin fijar cada breakpoint.
flex-wrap: wrap;Permite que los elementos bajen a otra fila si falta espacio.
font-size: clamp(1.5rem, 4vw, 3.5rem);Cambia de forma continua entre un mínimo y un máximo.
max-width: 100%; height: auto;Evita que una imagen sea más ancha que su contenedor.
@container (min-width: 30rem)Adapta un componente según el espacio de su contenedor.
No hay comandos que coincidan con esa búsqueda.
04 Laboratorios guiados
En cada laboratorio se modifica una parte real del CSS. Observa el resultado y luego lee la regla que lo produce.
Compara cómo se comporta una caja medida en px, %, vw y rem.
width: 320px;Los píxeles mantienen el mismo tamaño. Si el contenedor se hace menor, la caja puede desbordarse.
Combina un mínimo, un valor flexible y un máximo para mantener títulos legibles.
font-size: clamp(28px, 5vw, 68px);Tamaño calculado: 32 px
.galeria {
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 720px) {
.galeria {
grid-template-columns: repeat(3, 1fr);
}
}Una media query mira la ventana completa. Una container query mira el espacio real del componente. Reduce la columna para comprobar la diferencia.
Se organiza en fila cuando su propia columna tiene espacio suficiente.
.zona { container-type: inline-size; }
@container (min-width: 420px) { .tarjeta { display: flex; } }05 Playground
Este editor combina tu HTML y tu CSS en una vista segura. Prueba un ejemplo o crea el tuyo desde cero.
06 Comprueba lo aprendido
Responde cuatro situaciones reales. Puedes intentarlo cuantas veces quieras; el progreso queda guardado en este navegador.
Empieza por la primera pregunta.
01 Una fila de tarjetas se desborda en pantallas pequeñas. ¿Qué solución es más flexible?
02 ¿Qué enfoque empieza con la versión sencilla y agrega complejidad cuando hay más espacio?
03 Un componente aparece en una barra lateral y también en el área principal. ¿Qué consulta puede responder a su propio espacio?
04 ¿Cuál es un buen motivo para crear un breakpoint?
ANTES DE ENTREGAR
Marca cada punto cuando pruebes tu propio proyecto.
07 Para seguir aprendiendo