Media queries permiten aplicar estilos CSS específicos dependiendo de las capacidades del dispositivo. Son compatibles en la mayoría de navegadores modernos e incluyen opciones como el ancho, alto, orientación y resolución. Usando sintaxis como @media, pueden aplicarse estilos diferentes para diferentes tamaños de pantalla.

1. Media Queries

2. Compatibilidad
 Firefox 3.6+
 Safari 4+
 Chrome 4+
 Opera 9.5+
 iOS Safari 3.2+
 Opera Mobile 10+
 Android 2.1+
 Internet Explorer 9+

3. ¿Por qué usar media queries?
 El módulo de CSS3 de media query nos permite
aplicar estilos CSS particulares dependiendo de
las capacidades del dispositivo.
 http://www.w3.org/TR/css3-mediaqueries/
 Media query consiste de un media type y ninguna
o más expresiones que chequean las
capacidades del dispositivo.

4. Sintaxis
body {
background-color: grey;
}
@media screen and (max-width: 960px) {
body {
background-color: red;
}
}
@media screen and (max-width: 768px) {
body {
background-color: orange;
}
}
@media screen and (max-width: 550px) {
body {
background-color: yellow;
}
}
@media screen and (max-width: 320px) {
body {
background-color: green;
}
}

5. Opciones Media Query
 Viewport
 width
 height
 Device
 device-width
 device-height
 orientation: Portrait o landscape
 aspect-ratio

6. Opciones Media Query
 device-aspect-ratio
 color:
 color-index
 monochrome
 resolution
 scan
 grid

7. Ejemplo
 Diseño de Ancho Fijo
 Hacer imágenes lo más pequeñas posible
 Establecer diferentes viewports widths.