Source: http://www.html6.es/t20_mediaqueries.html
Timestamp: 2017-08-22 20:31:38+00:00

Document:
Funcionamiento de los mediaqueries
Exclusivo para móviles y tablets
• Múltiples resoluciones
Los llamados media queries son una serie de funciones que incorpora CSS3 para que las páginas web se adapten "racionalmente" o adopten una maquetación diferente según la resolución en la que se muestre la página web, ya sea en navegadores que funcionan sobre ordenadores con grandes monitores, sobre tablets, móviles o incluso displays de neveras, yogurteras, coches o lavadoras conectadas a Internet.
En la actualidad existe una muy amplia variedad de resoluciones de pantalla, pertenecientes a tablets, móviles y otros dispositivos. Por ello es conveniente adoptar una serie de estándares que abarquen las resoluciones más habituales:
Hace algunos años era mucho más fácil controlar las resoluciones para los diferentes medios, -por ejemplo- la resolución habitual para un móvil era de 320 píxeles en modo horizontal y 480 en modo vertical. Actualmente existen móviles que tienen resoluciones equiparables a tablets y a pequeños portátiles. Por ello, para intentar agrupar resoluciones en grupos estándares, podemos utilizar los siguientes grupos:
Resoluciones iguales o menores de 480 píxeles: para móviles
Resoluciones de 481px a 768 píxeles: para tablets
Resoluciones mayores de 768 píxeles: para ordenadores
• ¿Dónde colocarlos?
Como habitualmente cada página html tiene su propia estructura y necesita de una adaptación personalizada, este código CSS se suele añadir en el <style> del <head>, dentro de la propia página html, aunque siempre al final, siempre justo antes de cerrar la etiqueta </style>.
Primero colocamos todos los selectores habituales de la página, ya sea dentro del <head> o bien dentro un archivo CSS externo.
Después de todos los selectores CSS habituales se colocan los mediaqueries con sus selectores CSS dentro.
• Funcionamiento de las Mediaqueries
Un mediaquerie agrupa diferentes selectores CSS e identifica en qué condiciones se deben ejecutar dichos selectores. Normalmente estas condiciones están relacionadas con la resolución horizontal del dispositivo donde se está visualizando la página web.
En el código del ejemplo anterior: (@media only screen and (max-width:320px){), se indica que si la resolución horizontal (width) es menor que (max) 320 píxeles se modificará el color de fondo del <body> por rojo y el texto del <div> con id="bloque1" será de 12 píxeles. Si no se cumple esta condición se habrán ejecutado los primeros selectores CSS que indican un color de fondo blanco y un tamaño de fuente de 14px.
Tenemos diferentes posibilidades:
<!--Este mediaquerie se ejecutará sólo cuando la resolución horizontal sea menor de 320 píxeles-->
<!--Este mediaquerie se ejecutará sólo cuando la resolución horizontal sea mayor de 980 píxeles-->
El primer parámetro seleccionado en rojo tiene dos posibilidades:
max-width: Equivale a la traducción "cuando la resolución horizontal sea menor que la indicada...".
min-width: Equivale a la traducción "cuando la resolución horizontal sea mayor que la indicada...".
También se pueden combinar dos rángos para ajustar todavía más un rango de resolución.
<!--Se ejecutará sólo cuando la resolución horizontal se encuentre entre 320 y 480 píxeles-->
• Exclusivo para móviles y tablets
En un móvil no tenemos una ventana del navegador que podamos redimensionar como ocurre con un ordenador, sino que toda la pantalla del móvil es utilizada como ventana del navegador.
Además -como norma general- cuando se visualiza una página web en un móvil el contenido se escala para mostrarlo al completo, por lo que generalmente la página se muestra muy pequeña.
Para evitar estos dos problemas tenemos dos soluciones:
Añadiendo device podemos hacer referencia -no al ancho de la ventana del navegador (que no existe como tal)- sino a la anchura real del dispositivo.
Para que el contenido no se escale automáticamente al visualizar una página web debemos utilizar un metadata que colocaremos dentro del <head> para configurar el viewport con varias propiedades y que únicamente funcionará para móviles y tablets:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
Con width=device-width indicamos que el contenido se adapte a la resolución horizontal real de nuestro dispositivo (no a la ventana ficticia del navegador).
Al mismo tiempo con initial-scale=1 estamos configurando la escala inicial de visualización. Así, utilizando un valor de "1", el contenido se verá al 100% del tamaño (con "2" la escala inicial sería el doble, pudiéndose utilizar decimales "0.75", "1.25"...)
Por último, podemos indicar el máximo grado de zoom que podrá hacer el usuario utilizando maximum-scale=2. En este ejemplo, con un valor de "2", se permite al usuario ampliar el contenido como máximo el doble de su tamaño original.
Por el contrario, si queremos que el usuario no pueda empequeñecer más del tamaño original el contenido podemos añadir la propiedad minimum-scale=1.
Ejemplos del mismo contenido con el 'uso' o 'no uso' de mediaqueries y viewport:
Sin mediaqueries
Sin viewport
Una página web sin mediaqueries ni metadata name="viewport" se escala automáticamente para que se pueda visualizar entera, por lo que todo el contenido se reduce inicialmente, incluso aunque el contenido pueda caber perfectamente en la resolución horizontal del dispositivo.
(sólo en móviles)
Con mediaqueries sin device
Una web que utiliza mediaqueries sin utilizar 'device' (max-device-width) / (min-device-width), y sobre todo tampoco usa viewport, se visualiza exactamente igual que si no tuviera nada, ya que sin viewport, utilizar los mediqueries sin 'device' en móviles y tablets carecen de utilidad.
Con mediaqueries con device
Si incorporamos mediaqueries con el prefijo 'device' (max-device-width / min-device-width) pero sin el metadata viewport, los mediaqueries funcionan correctamente, pero visualizando la página de entrada a una escala muy reducida para permitir la visualización entera del contenido.
Con mediaqueries con/sin device
Con viewport
Para que los mediaqueries funcionen correctamente es imprescindible la utilización del metadata "viewport" con las propiedades correspondientes ('width=device-width' e 'initial-scale=1'), sin importar demasiado el uso o no del complemento 'device' en los mediaqueries.

References: resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución