Media Query

Hablando del flexbox te hemos mostrado un concepto fundamental en el diseño de un sitio web; incluso antes de comenzar a escribir código para crear un sitio web, de hecho, debe cuidar el diseño con minucias. Es por eso que introdujimos el concepto de diseño "mobile-first" en la última guía.
¿No te acuerdas? No te preocupes, lo volvemos a ver rápidamente.

Diseñar un sitio web siguiendo los preceptos de “mobile-first” significa que lo primero que debes pensar cuando estructura el diseño de tu sitio es que se muestre en la pantalla de un teléfono móvil. Esto se debe a que, reiteramos una vez más, el mayor tráfico en un sitio web actualmente se realiza desde un teléfono, por lo tanto “desde el móvil”.
Por lo tanto, diseñarás tu layout principalmente utilizable desde una pantalla más pequeña, y así sucesivamente, desde las pantallas de otros dispositivos más grandes, hasta la vista de escritorio o desde un PC.

En este punto puedes sentirte un poco desorientado: ¿quizás diciendo que tienes que escribir diferentes hojas de códigos para los diferentes tamaños de pantalla de los dispositivos desde los que accede a su sitio web, es una locura?
No te desanimes. Hay una forma más inteligente de adaptar tu layout y código a las diferentes dimensiones anteriores. Estamos hablando de los MEDIA QUERIES.

¿Qué es un media query?

Un media query es una parte de código compuesta por la declaración de un tipo de medio, precisamente, con su tamaño especificado en píxeles y expresiones, a continuación, que determinan la validez de las características de ese medio.
¿Difícil? ¡No creo! Veamos la sintaxis para que se despejen las dudas.

Media query: la sintaxis.

Digamos que hemos creado nuestro bonito diseño móvil.
Para simplificar el concepto al extremo, la característica que analizaremos será el color de fondo de nuestro sitio.
Entonces, en el móvil tenemos un fondo azul. Para los otros dispositivos, sin embargo, absurdamente, estamos obsesionados con la idea de cambiar el color de este fondo y hacerlo verde.
Razonemos un momento.

Podemos considerar dispositivos "móviles" hasta un ancho (una width, por tanto) de 576px.
Queremos actuar sobre las pantallas de dispositivos más grandes que ese ancho.

Así pues, retomando la definición anterior, el medio sobre el que actuaremos será la pantalla del dispositivo. Por tanto, tendremos que indicar el tipo de soporte y su tamaño para que el navegador entienda cómo actuar.
De ello se deduce que la sintaxis será la siguiente.
Regla principal - desde móvil : 

.background-color {
   background-color: blue;
}

Media query para cambiar el color del fondo: 

@media screen and (min-width:576px) {
   .background-color {
      background-color: green;
   } 
}

Como puedes ver, tenemos la declaración de la media query, especificando el tipo de medio y el mínimo (o máximo, dependiendo de lo que queramos actuar) seguido del selector que necesitamos (aquí la clase de color .background) al que modificar los atributos css deseados (en este caso, el color de fondo)

Es más fácil hacerlo que decirlo, ¿verdad?

Las media queries deben introducirse en nuestra hoja de códigos o insertándolas al final de la hoja CSS, al final, o en una hoja CSS separada que luego vincularemos en el encabezado de nuestro documento html.
Recuerda insertarlos en un orden muy específico, ya que debido al principio del estilo en cascada mencionado anteriormente, un orden incorrecto podría hacer que uno sobrescribiera al otro, no haciendo que las instrucciones que deseas funcionen.

Con esta herramienta, por lo tanto, puedes cambiar tu código de forma rápida y sencilla, haciéndolo diferente de cualquier dispositivo que desee. ¿Captas su poder?