3. Diseño Responsive: El mundo adaptado
Media Queries: La magia del cambio
Una Media Query te permite decir: "Aplica estas reglas CSS SOLO SI la pantalla mide más de 768 píxeles".
css-responsive
CSS
1 @media (min-width: 768px) {
2 /* Reglas exclusivas para tablets y PCs */
3 .grid { grid-template-columns: repeat(3, 1fr); }
4 }
📱 El Enfoque Mobile First
Hoy en día, se diseña primero para el celular y luego se añaden capas para lo más ancho. ¿Por qué?
- Más usuarios: Hay más gente en el móvil que en PC.
- CSS más limpio: Es más fácil añadir reglas conforme crece la pantalla que intentar "quitar" cosas de una web de escritorio gigante para que quepan en un móvil.
Unidades Relativas
- % (Porcentaje): El espacio comparado con su padre.
- vw / vh: Porcentaje de lo que mide toda la pantalla física (Viewport).
- rem: Unidades comparadas con el tamaño de letra raíz. ¡Genial para que el usuario pueda hacer Zoom sin que la web se rompa!
