Diseño responsivo con Media Queries

¿Qué son los Media Queries? 🤔

Cuando se trata de diseño responsivo, una de las mejores herramientas son los Media Queries. Los Media Queries te permiten aplicar estilos dependiendo de ciertas condiciones. Éstas condiciones, en un diseño responsivo, son los tamaños de las pantallas.

Es decir, tu puedes condicionar el estilo de una página dependiendo del tamaño de la pantalla. Por ejemplo, si la pantalla donde se está viendo el contenido es de 375px o menor se puede especificar cierto color de fondo. Éste color de fondo puede cambiar si la pantalla es de 678px o mayor, y tener otro color completamente diferente si el tamaño es de 1080px en adelante, y así sucesivamente...

La forma de aplicar un Media Query dentro del archivo CSS es la siguiente:

@media only screen and (max-width: 768px){
   body{
      background-color: grey;
   } 
}

Donde:

• @media: es la declaración inicial para indicar que lo que precede es un Media Query.
• only: indica que los cambios se van a ver solamente donde se especifica. Podemos omitirlo.
• screen: determina donde quiero ver los cambios, en este caso en pantalla, también puede llevar el valor de print, donde aquí, los cambios se van a ver cuando presionamos CTRL + P y se muestra la pantalla donde se previsualiza la página antes de enviar a imprimir.
• and: conector lógico que indica al navegador que además de mostrar en pantalla también se debe cumplir la condición que está a continuación: (max-width: 768px). Este conector lógico también puede ser "or".
• (max-width: 768px): Aquí estamos diciendo que los cambios que se encuentran dentro de las llaves "{}" se apliquen para pantallas cuyo tamaño sea menor o igual a los 768px. Así como hay max-width también se puede usar min-width donde el resultado va a ser el opuesto.

¿Se puede cambiar solamente el color de fondo? 🎨

En realidad puede ser cualquier estilo, no solamente el fondo, absolutamente cualquier estilo, desde los colores, el tamaño, hasta la disposición de los elementos.

Quiero saber más... 🙋‍‍♀️🙋‍‍♂️

Si quieres conocer más acerca del diseño responsivo con Media Queries te recomiento el siguiente video: 📹

👍‍‍Si te interesó este contenido me puedes seguir en:
twitter: @CodingTube 👈‍‍ youtube: CodingTube ❤️