Utilizar las Media Queries correctamente.

Utilizar las Media Queries de CSS correctamente nos ofrece un abanico de posibilidades para mejorar la presentación y visualización de nuestros proyectos o webs.

Las Media Queries son una de las grandes ventajas de CSS3, ya que permiten saber qué sistema se está visualizando una página web y, en función de ello, aplicar unas reglas de estilo u otras. Así, podemos servir un CSS personalizado, acorde las condiciones del navegador o dispositivo que nos visita.

Se han convertido en uno de los mejores recursos con los que cuentan los diseñadores para hacer sitios responsive.

Utilizar las Media Queries es muy sencillo, como todo el lenguaje CSS en general. De una manera descriptiva podemos indicar una condición y a continuación los estilos que deben aplicarse cuando ésta se cumpla.

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.

 

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.

La etiqueta LINK , para cargar nuestros archivos CSS, tiene esta forma:

<link rel="stylesheet" href="mis_estilos.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-print.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.

media=»(min-width:1200px)» 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.

Organizar las Media Queries así, con archivos que se cargan según unas características del dispositivo, 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.

 

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.

En la sentencia @media podemos indicar entre paréntesis las condiciones que deben cumplirse para que se aplique esta mediaquerie.

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.

La sentencia @media nos permite detectar ciertas características de nuestra pantalla:

• medios
• tamaño de pantalla
• orientacion del dispositivo

 

Detectando medios.

Con Media Queries podemos detectar el medio donde se está consumiendo un sitio web:

• all Aplicable a todos los dispositivos.
• print Destinado material paginado y para documentos visibles en pantalla en modo de vista previa para impresión.
• screen Destinado a principalmente a pantallas de computadora a color.

@media print {
  body { font-size: 10pt }
}
@media screen {
  body { font-size: 13px }
}
@media screen, print {
  body { line-height: 1.2 }
}
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
    body { line-height: 1.4 }
}

 

Detectando características de los medios.

Cada característica de medios verifica una característica específica del navegador o dispositivo.

Por ejemplo, la característica  width  es especificada como <length> valor que representa el ancho de la ventana gráfica.  Es una función de rango, lo que significa que también puede usar el prefijo min-width and max-width variantes para consultar valores mínimos y máximos, respectivamente.

La característica de medios min-width se refiere al ancho mínimo de pantalla, es decir, que las reglas que contenga se aplicarán cuando la pantalla tenga una anchura mayor de la indicada.

La característica de medios max-width se refiere al ancho máximo de pantalla, es decir, que las reglas que contenga se aplicarán cuando la pantalla tenga una anchura menor o igual a la indicada.

Hay cuatro puntos de interrupción por defecto, inspirados en resoluciones comunes de dispositivos:

/* Small (sm) */
@media (min-width: 640px) { /* ... */ }

/* Medium (md) */
@media (min-width: 768px) { /* ... */ }

/* Large (lg) */
@media (min-width: 1024px) { /* ... */ }

/* Extra Large (xl) */
@media (min-width: 1280px) { /* ... */ }

 

Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

 

Otro ejemplo sería orientation, que detecta la orientación del dispositivo.

La característica de medios orientation toma dos posibles valores:

• landscape: orientación horizontal, es decir, que el ancho es mayor o igual que el alto
• portrait: orientación vertical, es decir, que el ancho es menor que el alto

 

@media (orientation: portrait) {
  html {
    background-color: lightblue;
  }
  body {
    flex-direction: column;
  }
}

@media (orientation: landscape) {
  html {
    background-color: lightcoral;
  }
  body {
    flex-direction: row;
  }
}

Hay muchas media feature que puedes utilizar en tus archivos CSS para añadir a tu web.

 

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.
  

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

• Operador not: El operador not aplica a todo el query y retorna verdadero si es posible y si no, retorna falso
  
• Operador only: se aplican las reglas solo en el caso que se cumpla cierta circunstancia.
  
• Operador or: Las listas separadas por comas se comportan como el operador  or cuando es usado en media queries. Cuando utilice una lista separada por comas y alguno de los queries retorna verdadero, el estilo o la hoja de estilos sera aplicada. Cada query en una lista separada por comas es tratado como una query individual y cualquier operador aplicado a un medio no afectara a los demás. Esto significa que cada query en una lista separada por comas puede tener como objetivo diferentes medios, tipos y estados.

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

 

Hay cientos de combinaciones que puedes utilizar en los media queries de tus archivos CCS. Según mi experiencia, los más utilizados son los que detectan tamaño y orientación.

Para finalizar, aqui te dejo un enlace a un listado de las media queries para varios dispositivos (desde smart watch a pantalla gigante) de varias marcas.