Para entender el concepto de Media Query, nada mejor que la definición oficial del W3C que dice: "Una media query consiste en un tipo de dispositivo (media) y cero o más expresiones que comprueban  el estado de las características particulares de ese dispositivo. Entre las características que pueden utilizarse en una media query están las propiedades  "ancho", "alto" y "color". Mediante el uso de media queries, la presentación del contenido puede adaptarse a un rango específico de dispositivos de salida sin necesidad de modificar el propio contenido".

Traduciéndolo al idioma ´martiniano´, una Media Query es una serie de condiciones que pueden aplicarse a nuestras hojas de estilo CSS para que, según el tamaño y resolución del dispositivo, adopte una u otra forma.

Si ya teníamos poco con adaptar las webs para todos los navegadores y Explorer y sus propios estándares, ahora tenemos el reto de hacer que nuestras webs se adapten a nuestro teléfono, tablet, netbook, televisión, reloj Casio de caucho y cuando dispositivo tengamos por ahí que se conecte a Internet.

Pues bien, el uso extensivo de las Media Queries da paso al uso del ya conocido Diseño Adaptativo o Responsive Web Design, del cual dí mis primeros pasos en este artículo que escribí hace unos meses.

Partiendo de cero.
Para empezar es necesario tener claros unos puntos que nos servirán para dejar una base establecida:

• Debes utilizar HTML5, esto es, no vale xhtml, el doctype declarado debe ser tal como se explica aquí.
• El viewport, imprescindible (lo explicaré más abajo).
• Puedes valerte de un Framework de Responsive. En mi anterior post sobre Responsive Web Design dejo una lista muy amplia de los más conocidos.
• Las condicionales y las hojas CSS a aplicar en cada caso.

Importante:
Como bien sabrás, Internet Explorer en versiones 8 y anteriores, pasarán del Responsive, del HTML5 y de prácticamente todo lo que hagas, así que no te olvides de la hoja CSS (o usar librerías como Modernizr) específica para este navegador(?).

Viewport.
El viewport es el área visible de nuestro navegador, de tal forma que podemos manipularla como se ve, haciendo que ese área visible sea igual al ancho de dispositivo, esto es súper importante para los dispositivos móviles. 

Resumiendo, es un nuevo meta que se declara en el HEAD de nuestra web que hace que los que los dispositivos no alteren el zoom declarado por la página, es decir, le dices a tu web que tu teléfono no muestre la versión de 1024px reducida, sino que muestre la versión que le corresponde al tamaño original del dispositivo.

Con la gran variedad de equipos y tamaños de pantalla, el viewport nos permite configurarlo de tal manera que pueda ajustarse dinámicamente al tamaño de cada dispositivo usando el atributo ´device-width´ que es equivalente al 100% del ancho de la pantalla de dicho dispositivo, independientemente de su tamaño, posición o resolución.

La configuración básica del viewport es como < meta name = ´viewport´ content = ´width=device-width´ />.

Aplicando las Media Queries.
Los Frameworks que mencioné anteriormente traen toda la lista de Media Queries necesarias para cubrir todas las necesidades con las que podemos encontrarnos hoy día (incluso la nueva Retina Display de Apple).

Para cargar CSS diferentes, podemos usar una sentencia tal como: < link rel=´stylesheet´ type=´text/css´ media=´screen and (max-device-width: 480px)´ href=´estilos.css´ />, con lo que esta hoja CSS se aplicará sólo en pantalla y si nuestro dispositivo tiene menos de 480px de ancho.

También, pueden escribirse directamente en nuestra hoja CSS, pero me parece mejor y más limpio, no mezclar condicionales, en este caso, un ejemplo sería: @ media screen and(max-widht:600px){ body {color: #000;font-size:90%;padding: 0 5%;}}.

En fin, espero que este breve resumen te sirva tanto como me sirvió a mi para empezar a hacer webs adaptativas. Cualquier aporte o sugerencia que quieras dejarme, no lo dudes, será bienvenido!

PD: Yo suelo usar Skeleton como Framework