Los media queries de CSS3 son una forma de adaptar nuestros diseños web a los distintos dispositivos. Se utilizan en el resposive web design, y son una gran opción para mejorar la experiencia del usuario. No es lo mismo ver una página web en un navegador de escritorio que verla en un navegador de un smartphone o tablet.

Introducción

Existen otras opciones como tener dos o más webs creadas y cargar una u otra dependiendo de cual sea el dispositivo que se use, pero esto no es para nada óptimo.

Antes se podía distinguir entre el css que se debía utilizar para mostrar en pantalla y el que se utilizaba para imprimir:

@media screen {
 h1{
  color:orange;
 }
}

@media print {
 h1{
   color:black;
 }
}

 

Ahora, con las media queries las opciones aumentan. Un ejemplo de media queries sería el siguiente:

.contenido{
 width:990px;
}
@media screen and (max-width:990px) {
   .contenido{
     width:100%;
   }
}

Imaginemos que tenemos un div con la clase contenido. En el código anterior definimos que como norma general el ancho va a ser de 900px, pero después, comprobamos que si se cumple que el dispositivo es una pantalla y que el tamaño es inferior a 990px, el ancho del div contenido será del 100%.

 

Cómo utilizar las media queries

Ejemplo #1

@media screen {
/*Nuestro código*/
}

Afecta a la vista de pantalla.

 

Ejemplo #2

@media print{
/*Nuestro código*/
}

Afecta a la vista de impresión.

 

Ejemplo #3

@media tv{
/*Nuestro código*/
}

Afecta a la vista de televisión.

 

Ejemplo #4

@media screen and (max-width:990px){
/*Nuestro código*/
}

Afecta a la vista de pantalla de un máximo de 990px.

 

Ejemplo #5

@media screen and (min-width:560px){
/*Nuestro código*/
}

Afecta a la vista de pantalla de un mínimo de 560px.

 

Ejemplo #6

@media print and (color){
/*Nuestro código*/
}

Afecta a la vista de impresión en color.

 

Ejemplo #7

@media screen and (orientation:landscape){
/*Nuestro código*/
}

Afecta a la vista de pantalla de un dispositivo en horizontal .

 

Ejemplo #8

@media screen and (orientation:portrait){
/*Nuestro código*/
}

Afecta a la vista de pantalla de un dispositivo en vertical.

 

Compatibilidad con navegadores

 

Navegador	GOOGLE CHROME	INTERNET EXPLORER	MOZILLA FIREFOX	SAFARI	OPERA
Desde esta versión aceptan @media	21	9	3.5	4.0	9

 

 

Fuentes:

https://developer.mozilla.org/es/docs/CSS/Media_queries

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp