CSS media queries

Limita las características de uso de un estilo.

Pueden resolverse con una hoja de estilo, se usa esa hoja cuando la condición es verdadera

o dentro de la hoja de estilos

Referencias:

Google Developer: RESPONSIVE WEB DESIGN BASICS
Usar consultas de medios en CSS para una mayor adaptabilidad
https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries

MDN: CSS media queries
https://developer.mozilla.org/es/docs/CSS/Media_queries

w3schools: CSS3 @media Query
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

W3C: Media Queries
W3C Recommendation 19 June 2012
http://www.w3.org/TR/css3-mediaqueries/

Operadores

Se pueden unir condiciones con los operadores lógicos, not, and y only.

@media (min-width: 700px) and (orientation: landscape) { ... }

Si la ventana tiene un ancho de 700px o mas y la pantalla esta en formato horizontal.

@media tv and (min-width: 700px) and (orientation: landscape) { ... }

Si el medio es una televisión, la ventana tiene 700px de ancho o mas y la pantalla esta en formato horizontal.

Con comas, se puede emplear para indicar diferentes medios, tipos y estados.

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

Se cumple cuando una pantalla es mayor de 700 y en un handled, con orientación landscape.

Only se emplea para prevenir el uso de navegadores antiguos.

Medios

Medias

Tipos

all Para todo tipo de medias, valor por defecto
aural Sintetizadores de audio
braille Para dispositivos tátiles braille
embossed Impresoras braille
handheld Oordenadores de mano, las antiguas PDA
print Para imprimir
projection En presentación como slides
screen En pantallas de ordenador, tabletas, smart-phones etc.
speech Lectores de páginas
tty Deprecated. En terminales de caracteres de ancho fijo como el que se emplean en teletipos y consolas
tv Para televisiones

Características

aspect-ratio el ratio entre ancho y alto de la ventana de salida, si queremos que nuestro estilo se muestre en pantallas cuadradas o superiores se pondra que el mínimo aspect-ratio sea 1/1, el primer valor es el horizontal y el segundo el vertical.

@media screen and (min-aspect-ratio: 1/1) { ... }

device-aspect-ratio el ratio entre ancho y alto del dispositivo de salida, marca la relación entre pixeles verticales y horizontales

@media screen and (device-aspect-ratio: 16/9) { ... }

Este ejemplo, selecciona el estilo cuando la proporción de aspecto es 16:9

color el número de bits por componente de color del dispositivo de salida
@media all and (min-color: 4) { ... }

color-index número de entradas en la tabla de colores indexados
@media all and (min-color-index: 256) { ... }

device-height alto del dispositivo de salida, la totalidad de la pantalla y no el área del documento a renderizar.

device-width ancho del dispositivo de salida.

height y width describe el ancho y alto de la superficie a renderizar en el dispositivo de salida, la ventana del navegador o el tamalño del papel en una impresora.

Orientation orientación apaisada landscape o vertica lportrait, landscape, cuando el ancho de la pantalla es mayor al alto y portrait cuando el alto de la pantalla es mayor al ancho.

@media (orientation: portrait) { ... }

Resolution

resolution la resolución del dispositivo de salida, en dpi, puntos por pulgada, dpcm, puntos por centímetro.

El dppx, es la medida que se emplea en pantallas retina, el divice-pixel-ratio, es el número de pixel del dispositivo por pixel CSS. El dppx es el número de puntos por unidad de pixeles, 1dppx=96dpi.

CSS-TRICKS, recomienda el uso de Media Queries para los dispositivos estándar.
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Para los dispositivos retina o alta resolución, Brett Jankord recomienda
http://brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries/

/* Clean version examples */

/* 1.25 dpr device pixel ratio */
@media
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi){
/* Retina-specific stuff here */
}

/* 1.3 dpr */
@media
(-webkit-min-device-pixel-ratio: 1.3),
(min-resolution: 124.8dpi){
/* Retina-specific stuff here */
}

/* 1.5 dpr */
@media
(-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi){
/* Retina-specific stuff here */
}

/*2.0 dpr */
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi){
/* Retina-specific stuff here */
}