Lección 8 de 8
Diseño responsive
El diseño responsive hace que tu sitio se vea bien en todos los tamaños de pantalla. Usa media queries para aplicar estilos diferentes según el ancho.
Cuando sea posible, usa unidades relativas como %, em, rem y vw/vh en lugar de píxeles fijos.
CSS
/* Mobile first: estilos por defecto */
.container { padding: 24px; }
/* Tabletas y pantallas más grandes */
@media (min-width: 768px) {
.container { padding: 48px; }
}
/* Escritorio */
@media (min-width: 1024px) {
.container { max-width: 1200px; margin: 0 auto; }
}