Media Queries CSS

Traducción: Consulta de Medios.

Media Queries CSS2

Las reglas @media se introdujo en CSS2, e hizo posible definir diferentes reglas de estilos para diferentes tipos de medios.

Por ejemplo, es posible tener un conjunto de reglas de estilos para pantallas de computadoras, otro para impresoras, otro para dispositivos de mano, otro para pantallas de televisión, etcétera.

Desafortunadamente los diferentes tipos de medios no obtuvieron mucho soporte para los diferentes dispositivos, a excepción para las impresoras.

Media Queries CSS3

Las Media Queries en CSS3 extendio la idea de los tipos de media del CSS2. En lugar de buscar un tipo de dispositivo, toma en cuenta la capacidad del dispositivo.

Ahora las media queries pueden ser usadas para checar varias detalles como:

• Ancho y Alto de la ventana gráfica (viewport).
• Ancho y Alto del dispositivo.
• Orientación si es Horizontal o Vertical (teléfonos y tabletas pueden cambiar este modo).
• Resolución.

Así, las Media Queries se han convertido en una técnica muy utilizada para desarrollar hojas de estilo a la medida, que varían en su comportamiento dependiendo de la resolución de pantalla del dispositivo desde donde se esta visualizando la página web, sea un equipo de computo de escritorio, portátil (laptop), tableta, o teléfono móvil.

Sintaxis Media Query

Un media query consiste de un tipo de media y puede contener una o mas expresiones que se resuelve en verdadero o falso.

@media not|only tipo_media and ( expresión_s ){
 código_css;
}

El resultado de un query es verdadero si el tipo de media especificado coincide con el tipo de dispositivo en que se muestra el contenido y todas las expresiones en la media query son verdaderas. Así, cuando la media query es verdadera las reglas de estilos correspondientes son aplicadas siguiendo las reglas de cascada normales.

A menos que se use el operador not o only, el tipo de media es opcional y el tipo all es implícito.

También se puede tener difernetes hojas de estilos para diferentes media.

<link rel="stylesheet" media="tipo_media and|not|only (expresión_s)" href="print.css">

Tipos de Media CSS3

Valor	Descripción
all	Usado para todos los tipos de media de dispositivos.
print	Usado para impresoras.
screen	Usado para pantallas de computadoras, tabletas, teléfonos inteligentes, etc.
speech	Usado para lectores de pantalla que leen la página en voz alta

Ejemplos:

Para demostrar el funcionamiento nos sirve un simple ejemplo en donde podemos cambiar el color del fondo dependiendo de la resolución de la pantalla desde donde se visualiza la página web.

CSS:

body { background-color: tan; }
/* En pantallas que son 992px o menor, 
se establece el color de fondo a blue */
@media screen and (max-width: 992px) {
  body { background-color: blue; }
}
/* En pantallas que son 600px o menor, 
es establece el color de fondo a olive */
@media screen and (max-width: 600px) {
  body { background-color: olive; }
}

Nota: Los puntos de quiebres más frecuentes en los dispositivos son de 992px y de 600px, pero no es una regla, por lo que estas en libertad de establecer estos puntos de quiebre como mejor se adapte a tu página web.

Como se puede notar, las medias query sirven para tener secciones alternativas de código CSS dentro la misma hoja de estilo.

En el siguiente ejemplo si la ventana gráfica (viewport) tiene un ancho de 600px o mas, la barra flota a la izquierda de la página. Pero si la ventana gráfica es menor de 600px la barra se posicionara por encima del contenido.

CSS:

@media screen and (min-width: 600px) {
  #barra { width: 200px; float: left; }
  #contendio { margin-left: 216px; }
}

Muestra: