Que es "CSS3 Media Queries"

Nos permite escribir CSS (hojas de estilo), que reconocen el tipo de medio por el cual se está visualizando nuestro sitio web. Con CSS se pregunta sobre el tipo de medio, detectando ciertas condiciones y permitiendo crear estilos especiales para cada salida que reconoce.


Máximo Ancho:

Usando un mismo archivo CSS: 

El siguiente CSS se aplicará si el máximo ancho de la pantalla es de 600 pixeles:

@media screen and (max-width: 600px) {

  .clase_a_aplicar {
       background: #ccc;
  }

}

Incluyendo archivos CSS por separado

Ponga la siguiente línea entre las etiquetas de encabezado < head >

   < link href="small.css" media="screen and (max-width: 600px)" rel="stylesheet" >< / link >

Mínimo Ancho 

Se aplica para áreas mayores a 900 pixeles.

@media screen and (min-width: 900px) {
  .class {
    background: #666;
  }
}

Combinando Media Queries

En el siguiente código se aplicará si el área de visualización es de entre 600px y 900px.

@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #333;
  }
}

Por el ancho del dispositivo

El siguiente css reconoce el ancho del dispositivo de 480px (Ej. iPhone), la diferencia con las sentencias anteriores es que esta limita por el ancho real del dispositivo, la anterior por el ancho de visualización.

@media screen and (max-device-width: 480px) {
  .class {
    background: #000;
  }
}

Vea también: los principales tamaños a usar en media queries