Bloque IV: el toolkit de layout ahora se hace adaptable
En el Bloque III aprendiste a construir cualquier layout: flujo normal, positioning, Flexbox y Grid. Ese toolkit es completo — pero no responde al tamaño de pantalla por defecto. Un grid de 3 columnas se ve perfecto a 1440px y es inutilizable a 375px.
El Bloque IV le agrega adaptabilidad a ese toolkit:
- CAT-27 (esta lección): que el mismo HTML funcione en cualquier tamaño de pantalla.
- CAT-28: centralizar los valores repetidos con custom properties.
- CAT-29: animar los cambios de estado para que la interfaz cobre vida.
Por qué el <meta viewport> es obligatorio
Antes de que los teléfonos inteligentes tuvieran pantallas angostas, la web era solo para escritorio. Cuando llegaron los primeros smartphones, los navegadores móviles inventaron un truco: renderizar la página a ~980px de ancho (como si fuera un escritorio) y luego escalarla para que entrara en la pantalla chica.
El resultado: todo se ve diminuto y el texto es ilegible sin hacer zoom.
<!-- Sin esto, el móvil renderiza a ~980px y escala → ilegible -->
<meta name="viewport" content="width=device-width, initial-scale=1">Qué hace cada parte:
width=device-width— el ancho del viewport es el ancho real del dispositivo (375px en un iPhone, no los 980px virtuales).initial-scale=1— la escala inicial es 1, sin zoom artificial.
El síntoma de no tenerlo: podés escribir media queries perfectas, pero en el móvil el browser cree que tiene 980px disponibles y nunca entra a la regla @media (min-width: 600px). El responsive no funciona.
Regla práctica: va en el <head> de TODOS los proyectos. No es opcional.
Filosofía mobile-first: diseñar para móvil y expandir
Mobile-first significa escribir los estilos base para pantallas pequeñas y usar @media (min-width:…) para agregar estilos a medida que el espacio crece.
La alternativa (desktop-first) hace lo opuesto: estilos base para escritorio y @media (max-width:…) para reducirlo. El problema: los estilos de escritorio son complejos; achicarlos genera más overrides, más cascada, más bugs.
Mobile-first con min-width (el estándar):
/* Base: una columna, simple — para cualquier pantalla */
.tarjetas {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Expansión: a partir de 600px, disposición en fila */
@media (min-width: 600px) {
.tarjetas {
flex-direction: row;
flex-wrap: wrap;
}
}El CSS base es lo más simple. La complejidad se agrega de forma progresiva — los dispositivos más restringidos reciben solo el CSS base.
Conexión con Grid (CAT-26): repeat(auto-fit, minmax(200px, 1fr)) ya era responsive sin media queries. Mobile-first con @media es el control explícito para cambios de layout más drásticos — de sidebar lateral a stack vertical, de nav horizontal a menú colapsado.
Sobre el motor de checks: el motor valida el atributo
contentdel meta con igualdad exacta de string. Si escribísinitial-scale=1.0en vez deinitial-scale=1, el check falla. Usá el valor exacto del enunciado.
Tu turno: agregá el <meta name="viewport"> con el content exacto indicado y comprobá con el botón “Comprobar”. Después arrastrá el borde del preview para ver las tarjetas reorganizarse.
Tu primer documento responsive
Completá el documento HTML para que se vea correctamente en dispositivos móviles. Tenés que agregar el `<meta>` de viewport dentro del `<head>`. El valor correcto es: `content="width=device-width, initial-scale=1"` El resto del documento ya está dado — no lo modifiques. **Importante:** una vez que agregues el meta, arrastrá el borde derecho del preview para ver cómo el layout de tarjetas pasa de columna a fila cuando el ancho aumenta.
Preview