-- Qué es Media querie
"Responsive Design" (Diseño Sensible) es la estrategia para hacer que un sitio "responda" al navegador según el tipo dispositivo en el que se muestra, haciendo que se vea correctamente aunque el tamaño y resolución de la pantalla sea cambia. Las media queries son la herramienta más poderosa para hacer esto.
Responsive Web Design son muchas cosas, es optimización para tres elementos fundamentales, navegadores y sistemas operativos, velocidades y anchuras de pantalla.
Observarás que un diseño adaptable es responsivo (responde) a los cambios de tamaño de la ventana del navegador. A medida que la hacemos mayor o menor la página va cambiando para adaptarse mejor a las nuevas dimensiones. Al estirar la pantalla observarás que, de una única columna en definiciones pequeñas, pasa a ser de dos columnas en una anchura de pantalla mayor, luego pasa a tener tres columnas cuando amplias todavía más el espacio y así indefinidamente, tal como el diseñador haya definido.
A esos saltos en los que un diseño cambia de un layout a otro, a medida que va agrandándose la ventana del navegador les llamamos breakpoints y se producen gracias a las media queries.
uno de los motivos por los que existe esta filosofía de diseño es el de no crear versiones distintas para distintos tipos de sistemas. No creamos una versión para móviles, otra para tabletas y otra para ordenadores. Eso debe haber quedado claro.
Pues de la misma manera, no creamos breakpoints orientados a marcas de dispositivos. El motivo es el mismo: es imposible que podamos generar tantos saltos como tipos de pantallas y sus resoluciones hay o habrá en un futuro. Es imposible alcanzar a todos los dispositivos, todas las marcas y modelos.
Si no haces breakpoints orientados a dispositivos, ¿cómo saber dónde colocarlos? La respuesta te la da tu diseño. En otras palabras, breakpoint debe estar orientado al diseño particular de tu web.
Para saber dónde colocar los saltos con las mediaqueries debes estirar la ventana del navegador, partiendo de la ventana con dimensiones reducidas (mobile first) vas estirando la anchura hasta que comienzas a apreciar que tu diseño está viéndose peor. No es que los usuarios se dediquen a cambiar las dimensiones de la ventana del navegador, es algo que hacemos los diseñadores, para imitar rápidamente distintos tamaños de pantalla de móviles o tablets.
Una media querie (media query) consiste en un "tipo de medio" y una o más expresiones que realizan al menos una consulta que filtra las reglas de estilo que se van a aplicar a la página web (dependiendo de las características del medio: ancho, alto y resolución).
Se entiende como un módulo CSS3 que permite adaptar la representación del contenido a las características del dispositivo. Añadido en CSS3, las media queries dejan que la presentación del contenido se adapte a un rango específico de dispositivos de salida, sin tener que cambiar el contenido en sí, ni duplicar las hojas de estilo para cada medio.
Cuando una media querie es verdadera, las hojas de estilo correspondientes (o las reglas) se aplican, siguiendo el orden normal de cascada y herencia de las hojas de estilo.
Puedes encontrar más información en este artículo de MDN (Mozilla Developer Network).
Sintaxis
Las Media queries consisten en una @regla, escrita como @media, y una o mas expresiones, inidcando características del medio, la cual se resuelve como verdadera o falsa. El resultado de la consulta es verdadera si el tipo de medio especificado en el media querie concuerda con el tipo de dispositivo que está siendo mostrado y, por tanto, todas las expresiones en el media query son verdaderas.
Operadores Lógicos: Se pueden redactar queries utilizando operadores lógicos, incluyendo not, and, y only.
Ejemplo de las media queries de Bootstrap:
Los puntos suspensivos ... representan los bloque de declaración que queremos aplicar si la consulta es verdadera.
Dos maneras de pensar en los puntos de ruptura (breakpoints)
/* /// DESKTOP FIRST /// */
/* ------------ Tablet */
@media all and (max-width: 768px) {
... ...
}
/* -------- Smartphone */
@media all and (max-width: 568px) {
... ...
}
/* /// MOBILE FIRST /// */
/* -------- Smartphone */
@media all and (min-width: 569px) {
... ...
}
/* ------------ Tablet */
@media all and (min-width: 769px) {
... ...
}
En el archivo HTML
Además, para que esto funcione, debemos añadir en el head una etiqueta meta dentro de nuestro archivo HTML, con el atributo content que nos interese, por ejemplo:
<meta name="viewport" content="width=device-width, initial-scale=1">