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!