¿Has notado que cuando accedemos a algunos sitios web, cambian su diseño dependiendo del dispositivo? Por ejemplo, si accedes al sitio web de Alura en una computadora, el diseño será un poco diferente que si lo accedes desde un celular.
Pero, ¿qué herramienta es responsable de esto?
¡La responsividad! Cuando el sitio web adapta el tamaño de sus páginas (diseño) según el tamaño de la pantalla del dispositivo desde el cual se accede o cuando reducimos el tamaño de la ventana del navegador (esta transformación también se puede hacer cuando aplicamos un zoom en la página), decimos que este sitio web es responsivo.
La responsividad no solo cambia el tamaño de las fuentes y elementos, sino que también soporta cualquier cambio, como por ejemplo: en el color de fondo, color de texto, bordes, etc. Esto depende de los estilos aplicados dentro de la media query en el archivo CSS.
Si asignas un color de fondo diferente al body dentro de la media query, el color solo cambiará cuando la pantalla alcance el tamaño definido por ella.
En este ejemplo, se aplicó el color morado al body dentro de la media query en el proyecto para pantallas de máximo 1200 píxeles. ¡Mira qué genial es el resultado!
Puedes aprender mucho más aquí en Alura sobre responsividad a través de este excelente curso sobre CSS: Flexbox e Layouts Responsivos.**
