Intermedio⏱ 40 min
🎨
CSS · Capítulo 9
Responsive Design
Diseña páginas que se adaptan a cualquier pantalla con media queries y enfoque mobile-first.
📖
Teoría
El diseño responsivo hace que las páginas se vean bien en todos los dispositivos. Los pilares son:
1. Meta viewport: <meta name="viewport" content="width=device-width, initial-scale=1.0">
2. Media queries: aplican estilos según condiciones (ancho de pantalla)
3. Unidades relativas: %, rem, em, vw, vh
4. Mobile-first: diseña para móvil primero, luego expande para pantallas más grandes
Breakpoints comunes:
- Móvil: < 640px
- Tablet: 640px - 1024px
- Desktop: > 1024px
css
/* Mobile-first: base para móvil */
.contenedor {
width: 100%;
padding: 1rem;
}
.grid {
display: grid;
grid-template-columns: 1fr; /* 1 columna en móvil */
gap: 1rem;
}
/* Tablet: 640px en adelante */
@media (min-width: 640px){
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Desktop: 1024px en adelante */
@media (min-width: 1024px){
.contenedor { max-width: 1200px; margin: 0 auto; }
.grid {
grid-template-columns: repeat(3, 1fr);
}
}⚡
Ejercicio práctico
🎯 Tu misión
Crea una página que en móvil muestre las tarjetas en una columna, en tablet en dos columnas, y en desktop en tres columnas. El header también debe adaptarse: menú hamburguesa en móvil, horizontal en desktop.
Vista previa