En una traducción rápida, las Media Queries de CSS (o CSS mediaqueries) son, consultas sobre las características del medio donde se está visualizando una web. Nos sirven para definir estilos condicionales, que solo se aplicarán en caso que esa consulta del medio sea satisfactoria.

Son una de las herramientas fundamentales para implementar el "Responsive Web Design" y han llegado de la mano de las CSS3, convirtiéndose en un aliado fundamental de cualquier diseñador web.

En la mayoría de los casos las Media Queries sirven para definir estilos diferentes para distintos tamaños de la pantalla. Son sencillas de entender y aplicar, aunque a decir verdad el estándar es bastante sofisticado. Nos ofrecen muchas posibilidades a la hora de aplicar estilos condicionales, con múltiples casos de uso, algunos no tan habituales en el mundo del diseño actual, pero que podrán tener su protagonismo en algún momento.

Mediaqueries: un paso al frente en las CSS

Las Media Queries representan una evolución importante de CSS, puesto que suponen la primera estructura condicional en el lenguaje. Sabemos que CSS no es un lenguaje de programación, ni tiene motivos para parecerse a ello, pero existen muchas cosas que se implementan en los lenguajes de programación y que nos vendrían bien en el desarrollo con CSS, como es el caso de los condicionales.

"Si ocurre ésto, entonces haz tal cosa"

Una construcción condicional como esta es tan útil y básica que, aunque CSS no sea un lenguaje de programación, necesitaba incorporarlas. Ejemplos de casos en los que nos vendría bien un condicional:

- Si la pantalla del usuario tiene estas características, entonces aplica estos estilos
- Si se imprime el documento en la impresora, aplica estos estilos.
- Si la pantalla del dispositivo tiene estas dimensiones y además está situado en posición horizontal (landscape), entonces aplica este CSS.

Situaciones como esas son básicas y los diseñadores pueden resolverlas usando las MediaQueries. Son un paso al frente en cuanto a la separación entre el contenido y su representación, puesto que nos facilitan que el contenido de una página pueda adaptarse al medio donde se está reproduciendo, sólo a través de la definición de estilos, sin tener que tocar el HTML para nada.

Alternativas para implementar Media Queries

Aunque la utilidad es novedosa, la sintaxis es parecida a lo que ya conocemos de las CSS, por lo que nos resultará bien sencilla.

Para producir Media Queries debemos tener siempre en mente la expresión condicional, aquella que debe cumplirse para que se apliquen ciertos estilos. Además la expresión condicional puede tener incluso varias condiciones, usando operadores lógicos como "and" para combinarlas. De modo que las circunstancias que se deban cumplir para aplicar unas reglas CSS sean de lo más variadas.

Alternativa 1: Aplicación de mediaqueries por la etiqueta LINK

La primera alternativa de las MediaQueries es a través del atributo media de la etiqueta LINK. Como sabemos, esa etiqueta es la que se usa para enlazar una hoja de estilo con un documento HTML. En ese enlace podemos especificar condicionales que deben cumplirse para que los estilos enlazados se apliquen. Por ejemplo, que se esté imprimiendo un documento o que la pantalla tenga cierta anchura mínima.

Recordamos, la etiqueta LINK tiene esta forma:

<link rel="stylesheet" href="estilos-generales.css">

Pues ahora simplemente le podemos agregar el atributo "media" indicando la condición que se debe cumplir para que estos estilos se apliquen:

<link rel="stylesheet" href="estilo-imprimir.css" media="print">

Este atributo media="print" quiere decir que los estilos deben aplicarse sólo cuando la página se están mostrando para la impresión.

<link rel="stylesheet" href="estilo-pantallas-grandes.css" media="(min-width:1200px)">

Este uso será seguramente más novedoso para ti. Quiere decir que esos estilos deben aplicarse sólo cuando la pantalla del usuario (los píxeles de anchura de la pantalla de un móvil o, en caso de ordenadores de escritorio, la anchura de la ventana del navegador) tenga una anchura mínima de 1200 píxeles.

El problema de escribir tus Media Queries así es que tienes archivos de CSS separados. Es decir, aquellos estilos para impresión o para pantallas de 1200px están en archivos independientes, lo que es sencillo de administrar para nosotros, pero una mala práctica en términos de optimización de la web, puesto que se tienen que realizarse varias solicitudes al servidor distintas para traerse los CSS. En la práctica ralentiza la carga de la página en relación a hacer una única solicitud de un archivo CSS que contenga todo el código de los estilos.

Alternativa 2: Aplicación de mediaqueries mediante @media

Este método que vamos a ver ahora es más interesante y es el que se usa habitualmente a nivel profesional. Consiste en incorporar los estilos en una construcción @media, donde se apliquen entre llaves todos los estilos que queremos para una consulta de medio dada.

@media (min-width: 500px) {
    h1{
        margin: 1%;
    }
    .estiloresponsive{
        float: right;
        padding-left: 15px; 
    }
}

Como puedes ver, tenemos la sentencia @media en la que podemos indicar entre paréntesis las condiciones que deben cumplirse para que se aplique esta mediaquerie. En este caso será para pantallas que tengan una anchura mínima de 500 píxeles.

Luego, entre llaves colocamos todas las reglas y atributos de estilos CSS que necesitemos aplicar en esta situación. Las reglas de estilos son las mismas que pondrías fuera de la estructura condicional. Cuando la sentencia entre paréntesis se evalúe como verdadera, se aplicarán todas ellas.

Operadores lógicos para las Media Queries

Para combinar diversas condiciones podemos usar los operadores lógicos, de una manera similar a como se usan en lenguajes de programación. Los que tenemos disponibles son:

• Operador and: las dos condiciones deben cumplirse para que se evalúe como verdadera.
  
• Operador not: es una negación de una condición. Cuando esa condición no se cumpla se aplicarán las media queries.
  
• Operador only: se aplican las reglas solo en el caso que se cunpla cierta circunstancia.
  
• Operador or: no existe como tal, pero puedes poner varias condiciones separadas por comas y cuando se cumpla cualquiera de ellas, se aplicarán los estilos de las media queries.

@media (max-width: 600px) and (orientation: landscape) {
    h1{
        color: red;
    }
}

Esta regla se aplicaría para pantallas con una anchura máxima de 600 píxeles y cuando la orientación está en horizontal.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Para ver en funcionamiento la parte del orientation (landscape o portrait), tienes que usar un móvil o tablet y cambiar la posición de la pantalla, para que esté en horizontal o vertical.

Ten en cuenta que, si estás visualizando la página en un navegador de un ordenador de escritorio, lo más seguro es que no reconozca el cambio de orientación. En ese caso la posición siempre será considerada será landscape.