Diseño responsivo y media queries
Adaptar el diseño a distintos tamaños de pantalla.
Las media queries aplican reglas CSS solo cuando se cumple una condición, típicamente el ancho de pantalla: @media (max-width: 768px) { ... } aplica esos estilos solo en pantallas de 768px o menos.
El enfoque recomendado es mobile-first: escribir primero los estilos para pantallas pequeñas y luego usar min-width para ir agregando complejidad en pantallas más grandes, en vez de al revés.
No olvides la etiqueta <meta name="viewport" content="width=device-width, initial-scale=1"> en el HTML: sin ella, los navegadores móviles simulan una pantalla ancha y las media queries no se comportan como se espera.
Ejemplo — pruébalo tú mismo
Ponlo a prueba: Agrega una media query que cambie el color de fondo cuando la pantalla sea menor a 500px.