Responsive
🎯 Objetivo
Diseñar mobile-first con media queries. Un sitio, todos los dispositivos.
⚔️ Implementación
/* MOBILE-FIRST (base = móvil) */
.container {
width: 100%;
padding: 10px;
}
/* TABLET */
@media (min-width: 768px) {
.container {
max-width: 720px;
margin: 0 auto;
}
}
/* DESKTOP */
@media (min-width: 1024px) {
.container {
max-width: 960px;
}
.grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* BREAKPOINTS COMUNES */
/* Móvil: < 768px */
/* Tablet: 768px - 1024px */
/* Desktop: > 1024px */
/* ORIENTACIÓN */
@media (orientation: landscape) {
.hero { height: 50vh; }
}
/* MODO OSCURO */
@media (prefers-color-scheme: dark) {
body {
background: #1a1a1a;
color: #fff;
}
}
/* UNITS RESPONSIVE */
.texto {
font-size: clamp(1rem, 2vw, 2rem); /* Min, preferido, max */
width: min(90%, 1200px); /* El menor */
}🎯 Reto Ninja
MISIÓN DE ADAPTACIÓN
🌊 Adaptarse como el Agua
1
Define los estilos base de tu proyecto pensando primero en dispositivos móviles (Mobile-First).
2
Usa una Media Query para tablet (min-width: 768px) y cambia el layout a dos columnas.
3
Añade otra Media Query para escritorio (min-width: 1024px) y expande el diseño a tres o cuatro columnas.
4
Prueba la fluidez: usa clamp() para que tus fuentes crezcan suavemente según el tamaño de la pantalla.
✅ Checklist de Dominio
RESPONSIVE DOMINADO
Pergamino de Adaptación
¡MÓDULO 2 COMPLETADO! 🎉 Ahora dominas HTML + CSS + JavaScript.
Siguiente: Boss Fight - El Error Sin Commit
