Usar @media para detectar resolución de la pantalla

Estamos acostumbrados a que las propiedades CSS nos permiten controlar la forma en que se ve nuestro sitio, sin embargo, pese a que por lo general lo vemos a través de un monitor, esa no es la única forma de acceso. Obviamente, ahora, con los teléfonos móviles esto es evidente pero ya antes había otras formas tales como, por ejemplo, una impresora.

La regla llamada @media es la que permite especificar las propiedades que tendrá nuestro sitio según sea el medio en el cual se mostrará: una pantalla, un papel impreso o incluso algunos navegadores de voz. Usando eso, es posible diferenciar lo que se muestre en uno o en otro. Con este ejemplo simple haríamos que la sidebar no se imprimiera:

@media screen { /* pantalla */
#sidebar-wrapper { display: block; }
}
@media print { /* impresora */
#sidebar-wrapper { display: none; }
}

El medio está definido por palabras: all, aural, braille, embossed, handheld, print, projection, screen, tty, tv e incluso hay propiedades exclusivas para determinados medios pero, el tema que más me interesó de esto es lo que se muestra en un artículo de CSS-Tricks donde se hace referencia a una nueva serie de palabras claves que nos permitirían controlar la forma en que mostramos nuestro sitio según sea el tipo de resolución de pantalla que tenga el visitante.

Veamos la Plantilla Mínima de Blogger. Allí, el blog queda establecido con un ancho de 660 pixeles; es lo que dice la propiedad width de tres definiciones: #header-wrapper, #outer-wrapper y #footer. Está pensada para una resolución que era la "normal" en el 2006, es decir 800x600 pero, como el tiempo pasa inexorable, si bien sigue siendo un tamaño usado, la gran mayoría fue cambiando a resoluciones mayores y en algún momento, lo "normal" era 1024x768 por lo tanto lo que veíamos era el mismo blog pero grandes espacios vacios a los lados, es decir, el blog aparecía pequeño y perdido en una pantalla grande.

De allí que hubo muchos de nosotros que a fuerza de errores fuimos modificándolos para ampliarlos un poco aunque esto termina siendo una pelea imposible de ganar ya que las resoluciones siguen aumentando constantemente.

Claro que una solución es utilizar los llamados diseños fluidos que se adaptan automáticamente a la resolución aunque en lo personal, no me convencen demasiado. También es cierto que pueden usarse scripts que permiten utilizar distintas hojas de estilo e incluso que el usuario elija cuál utilizar.

Ahora, @media viene a agregar una posibilidad extra que sería bueno explorar aunque por el momento no está implementada en Internet Explroer pero si en el resto de los navegadores (más información).

Para ver un ejemplo vamos a usar la misma Plantilla Mínima de Blogger; la dejamos tal como está aunque en el ejemplo le he agregado una sidebar extra. Los anchos que definen el blog son estos:

#header-wrapper = width:660px;
#outer-wrapper = width: 660px;
#main-wrapper = width: 410px;
#sidebar-wrapper = width: 220px;
#footer = width:660px;

Así que vamos a agregarle definiciones al estilo, por ejemplo, luego de <b/skin> pondremos tres modelos diferentes de este modo:

<style>
/* esto funcionará si la resolución de pantalla está entre 300 y 800 pixeles de ancho */
@media (max-width: 800px) and (min-width: 300px) {
#header-wrapper { width:300px; }
#outer-wrapper { width: 300px; }
#main-wrapper { width: 300px; }
#footer { width:300px; }
/* no mostraremos ninguna sidebar */
#sidebar-wrapper { display:none; }
#sidebar-wrapper2 { display:none; }
....... cualquier otra variante .......
}

/* esto funcionará si la resolución mínima de la pantalla es de 1200 pixeles de ancho */
@media (min-width: 1200px) {
#header-wrapper { width:1000px; }
#outer-wrapper { width: 1000px; }
#main-wrapper { width: 670px; }
#sidebar-wrapper { width: 300px; }
#footer { width:1000px; }
/* no mostraremos la segunda sidebar */
#sidebar-wrapper2 { display:none; }
....... cualquier otra variante .......
}

/* esto funcionará si la resolución mínima de la pantalla es de 1600 pixeles de ancho */
@media (min-width: 1600px) {
#header-wrapper { width:1400px; }
#outer-wrapper { width: 1400px; }
#main-wrapper { width: 600px; }
#sidebar-wrapper { width: 350px; }
#footer { width:1400px; }
/* mostraremos la segunda sidebar */
#sidebar-wrapper2 { display:block; }
....... cualquier otra variante .......
}
</style>

Usando max-width, min-width, max-height y min-height podemos definir las "condiciones" en las que nuestro sitio se verá, estableciendo anchos o cualquier otra propiedad general o particular.

A medida que amplien esa ventana, verán que el ancho cambia y una imagen en una sidebar se muestra de diferente tamaño. Incluso, si se llega a superar el ancho máximo, aparecerá la segunda sidebar que sino, permanece oculta; en el demo, también cambian el color de fondo, el tamaño de los textos y su color.

Hay otras palabras similares: min-device-width, max-device-width, min-device-height, max-device-height pero también muchas otras que amplian aún más las cosas.

device-aspect-ratio y orientation permiten distinguir el aspecto, por ejemplo:

@media (device-aspect-ratio: 16/9) { ... } /* para pantallas de tipo widescreen */
@media (orientation:portrait) { ... } /* para pantallas más altas que anchas */
@media (orientation:landscape) { ... } /* para pantallas más anchas que altas */

Lo mismo con la resolución de los colores:

@media (color) { ... } /* para monitores color */
@media (monochrome) { ... } /* para monitores blanco y negro */
@media (min-color-index: 256) { ... } /* para monitores con 256 colores */

Lo interesante de esto es que los cambios funcionan dinámicamente, es decir, no hay necesidad de recargar la página por lo menos, agregándolo directamente aunque también es posible hacerlo enlazando las hojas de estilo alternativas:

<link type='text/css' rel='stylesheet' media='screen' href='URL_por_defecto.css' />
<link type='text/css' rel='stylesheet' media='screen and (max-width: 800px) and (min-width: 300px)' href='URL_pequeño.css' />
<link type='text/css' rel='stylesheet' media='screen and (min-width: 1200px)' href='URL_mediano.css' />
<link type='text/css' rel='stylesheet' media='screen and (min-width: 1600px)' href='URL_grande.css' />