CSS Media Queries (Responsive Web Design)

Uno de los grandes dolores de cabeza a la hora de maquetar una aplicaci贸n son las diferentes resoluciones contra las que nos tenemos que enfrentar… Y realmente puede llegar a ser complicado, sobre todo porque la tendencia es tener aplicaciones que sean capaces de adaptarse tanto a un navegador como a los diferentes dispositivos como m贸viles, tables, etc茅tera. La soluci贸n: Responsive Web Design 馃檪

Es por ello que, despu茅s de haber jugado bastante, una gran opci贸n para controlar el dise帽o de nuestras aplicaciones se trata de CSS Media Queries, las cuales son expresiones que retornan true o false relacionadas con propiedades media del navegador que est谩 solicitando la p谩gina.

驴C贸mo lo utilizo?

El primer paso que debemos dar es determinar d贸nde queremos especificar la expresi贸n. Existen varios sistemas para ello:

  • Usando @media{ //Styles聽}: Indicamos la expresi贸n que queremos evaluar y, si el resultado es true, se aplican los estilos que est茅n dentro del bloque media.
  • Usando @import: Este caso es similar al anterior pero , en vez de utilizar un bloque con los estilos a aplicar, se indica el archivo css que se quiere importa en el caso de que la expresi贸n resulte afirmativa.
  • Indicando la expresi贸n directamente en el link de importaci贸n del CSS.
  • Utilizando c贸digo Javascript: Es posible pero, personalmente, no creo que sea la forma m谩s eficiente. Basicamente porque el performance se puede llegar a ver afectado por ello… Pero es posible 馃檪

Una vez que tenemos decidido d贸nde, vamos a determinar el qu茅. Normalmente, las expresiones est谩n relacionadas con el ancho y el alto de un navegador ya que son los puntos de referencia que nos indican cual es nuestro espacio de trabajo. Por ejemplo:

@media screen and (max-width: 320px)
{
    body
    {
        font-family: Segoe UI, Arial, Verdana, sans-serif;
        font-size: 0.7em;
        padding: 5px;
        background-color: rgb(0  , 0  , 0  );
        color: #ccc;
    }
    article h2
    {
        font-size: 1.2em;
    }
    article h2:after
    {
        content: ' //Mobile - 320px';
    }

    section
    {
        padding: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        border: none;
        background-color: rgb(27, 117, 187);
    }
}

En este caso, he creado un bloque de c贸digo con una serie de estilos que solamente se aplicar谩n聽 si el navegador, ya sea dispositivo o no, tiene como tama帽o m谩ximo 320 p铆xeles (Como el Nokia Lumia 800 o el Samsung Galaxy SII).

El m茅todo m谩s com煤n es utilizar @media + la expresi贸n +聽el bloque de c贸digo que nos gustar铆a aplicar en ese caso. A煤n as铆, veamos las otras alternativas:

@Import

@import('mobile.css') screen and (max-width: 320px)

En el link de importaci贸n del CSS

<link href="styles.css" rel="stylesheet" type="text/css" media="screen and (max-width:320px)"/>

Utilizando codigo JavaScript

if ("styleMedia" in window && window.styleMedia.matchMedium("screen and (max-width:320px)")) {
            //Do stuff
}

A nivel de performance, la mejor soluci贸n es utilizar @media in line, dentro del CSS donde el c贸digo ya ha sido cargado y s贸lamente tiene que evaluar si lo utiliza o no (no tiene que comprobar si incluye un segundo archivo, no utiliza un lenguaje adicional como JavaScript, etc茅tera).

Por otro lado, otra cosa que os recomiendo es el uso de HTML Conditional Comments para evaluar qu茅 navegador es el que el usuario est谩 utilizando y, en funci贸n de ello, cargar un archivo u otro para que el dise帽o sea consistente con todos los navegadores:

<!--[if IE]> 
<link href="@Url.Content("/Content/IE.css")" rel="stylesheet" type="text/css" />
<![endif]--> 
<!--[if IE 6]> 
<link href="@Url.Content("/Content/IE6.css")" rel="stylesheet" type="text/css" />
<![endif]--> 
<!--[if IE 7]> 
<link href="@Url.Content("/Content/IE7.css")" rel="stylesheet" type="text/css" />
<![endif]--> 
<!--[if IE 8]> 
<link href="@Url.Content("/Content/IE8.css")" rel="stylesheet" type="text/css" />
<![endif]--> 
<!--[if IE 9]> 
<link href="@Url.Content("/Content/IE9.css")" rel="stylesheet" type="text/css" />
<![endif]--> 
<!--[if gte IE 8]> 
<link href="@Url.Content("/Content/greaterTahnIE8.css")" rel="stylesheet" type="text/css" />
<![endif]--> 
<!--[if lt IE 9]> 
<link href="@Url.Content("/Content/lowerThanIE9.css")" rel="stylesheet" type="text/css" />
<![endif]--> 
<!--[if lte IE 7]> 
<link href="@Url.Content("/Content/lowerThanIE7.css")" rel="stylesheet" type="text/css" />
<![endif]--> 
<!--[if gt IE 6]> 
<link href="@Url.Content("/Content/greaterThatIE6.css")" rel="stylesheet" type="text/css" />
<![endif]--> 
<!--[if !IE]> 
<link href="@Url.Content("/Content/notIE.css")" rel="stylesheet" type="text/css" />
<!-- <![endif]--> 

Espero que sea de utilidad 馃榾

隆Saludos!