Tema 20Media Queries

Las media queries o consultas de medios nos permiten cambiar ciertos aspectos de nuestro CSS cuando ocurre cierta condición. Se implementan con la regla de CSS @media. Típicamente, se utilizan para cambiar el estilo cuando una pantalla llega a cierta anchura, por ejemplo:

Cambia el tamaño de la ventana de tu navegador para que sea más angosta, y analiza el CSS que tenemos después de @media. (Si estás viendo este curso desde un dispositivo móvil, presiona los botones de cambio de zoom [1x, 0.5x, 0.25x] para visualizar los cambios.) Observa cómo utilizamos la propiedad max-width para que cuando el ancho de nuestra ventana llegue a 400px o menos, se modifiquen las propiedades de la clase col. El uso de esta función en CSS resulta muy práctica, pues podemos cambiar nuestro contenido de acuerdo con diferentes tamaños de dispositivos. Puedes ver más ejemplos haciendo clic aquí.