> Manuales > Manual de CSS 3

Las Media Queries son una de las principales novedades de CSS3. Estas construcciones del lenguaje CSS permiten definir estilos condicionales, aplicables únicamente en determinadas situaciones. Conoce todos los detalles de las mediaqueries CSS.

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.

Nota: A modo de curiosidad, pues realmente no se usa mucho en el diseño actual, las media queries pueden decirnos si el dispositivo tiene una relación de pantalla 4:3 o 16:9, o una profundidad de color dada, por ejemplo. En este artículo nos encargaremos de conocer los casos más comunes de uso y más adelante nos adentraremos en estas otras características adicionales.

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.

Nota: Este uso ya lo vimos anteriormente en el artículo Estilos específicos para 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:

@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.

Nota: Ten en cuenta que la mayoría de smartphones simulan tamaños de pantalla mayores, haciendo una especie de dimensiones virtuales que faciliten la lectura de webs que no están diseñadas para Responsive Web Design. Por ello, lo más seguro es que tengas que poner el "viewport" en el documento HTML a algo como:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Sin ese viewport tu móvil simularía que tiene unas dimensiones de unos 980 píxeles, cuando quizás la pantalla solo tenga una anchura real de 320 o 500 píxeles. Este asunto ya se explicó con detalle en el artículo sobre el viewport.

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.

@media tv and (min-width: 1200px){
    h1{
        margin: 10%;
    }
}

Esta regla aplicaría en dispositivos de tipo televisión y cuya resolución minima de anchura sea de 1200 píxeles.

El siguiente ejemplo ilustra un uso del operador OR de mediaqueries, que realmente no existe, sino que se usa la coma, para separar las distintas situaciones en las que se debe aplicar el estilo.

@media (min-width: 600px),  handheld and (orientation: portrait) {
    h1{
        color: green;
    }
}

Este mediaquery servirá para pantallas de minimas dimensiones 600 píxel y también para todos aquellos dispositivos handheld que estén en posición vertical.

Nota sobre Handheld: Handheld es un término inglés que sirve para especificar aquellos dispositivos que son de mano. Pequeños ordenadores que se llevan en la mano, como los palm o agendas electrónicas que aparecieron antes de popularizarse los smartphones o tablets. Por mis pruebas handheld no aplica a los móviles o tablets.

Nota sobre operador condicional OR: En esta faq puedes encontrar explicaciones adicionales sobre la aplicación del operador OR en las mediaqueries.

Conclusión sobre las mediaqueries CSS

Las Media Queries tienen muchas más posibilidades que no cubrimos con este artículo. Las veremos más adelante, pero sin duda con lo que ahora sabes podrás resolver el 98% de las necesidades que te puedas encontrar en el mundo del diseño web.

Si te interesa saber más sobre este tema, en este otro artículo de DesarrolloWeb.com te contamos la estrategia para aplicar las Media Queries en Responsive Web Design.

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Manual