Dic 142014
 
Artículo HTML

Hoy en día, los sitios web tienen que tener en cuenta el creciente volumen de usuarios que navegan utilizando dispositivos inteligentes, teléfonos y tablets.

Estos dispositivos tienen en general unas dimensiones de pantalla y unas resoluciones mucho más reducidas que las que ofrecen los equipos de sobremesa y ordenadores portátiles para los que muchos sitios web fueron inicialmente diseñados.

Idealmente, el diseño del sitio debería adaptarse a estos medios, para lo cual necesita detectar las características del dispositivo desde el que está siendo accedido y adaptarse al mismo. Inicialmente, se especificó el mecanismo del “meta viewport tag”, que ya hemos estudiado en otros artículos. Actualmente, se puede obtener un control más preciso utilizando las consultas de medios CSS (CSS media queries). Con ellas, se pueden definir conjuntos de reglas CSS diferenciadas para distintas resoluciones de pantalla, orientaciones del dispositivo, etc., de manera que el diseño se adapta sin necesidad de generar un código HTML distinto para cada tipo de dispositivo.

En este artículo revisamos la manera de utilizar las consultas de medios CSS en un sitio web.

Ejemplo sencillo de consulta de medios

El uso más elemental de una media query es la definición de una serie de reglas CSS para dispositivos con resoluciones de pantalla inferiores a un valor mínimo. Por ejemplo:

html, body, div, span, applet, p {
    font-size: 20px;
}
@media (max-device-width: 400px) {
    html, body, div, span, applet, p {
        font-size: 14px;
   }
}

En este ejemplo, vemos que la primera regla de la hoja de estilo establece, en el caso general, un tamaño de letra de 20px para una serie de elementos HTML. Sin embargo, la consulta de medios @media que la sigue establece que, si la resolución horizontal del dispositivo es inferior a 400 pixel, el tamaño de letra debe ser de 14 pixel.

En el interior de la consulta de medios puede aparecer cualquier tipo de regla de estilo: font-family, background, margin, visibility, position,…

Así, se pueden añadir reglas “visibility: hidden” para ocultar determinados elementos, “position: absolute” o “position: relative”, “top:” y “left” para cambiar la ubicación de otros elementos, etc.

Condiciones que se pueden utilizar en la definición de una consulta de medios

En el ejemplo que hemos visto, se utiliza una única condición “max-device-width”. Se pueden utilizar en la definición de la consulta de medios, como por ejemplo orientation (portrait, landscape). También se pueden combinar utilizando el operador “and”. Por ejemplo:

@media (max-device-width: 400px and orientation: landscape) {
...
}

También se puede utilizar una coma (en lugar de un operador “or”), para combinar condiciones, cualquiera de las cuales valida la expresión:

@media (min-device-width: 400px, max-device-width: 800px and orientation: portrait) {
...
}

Dispositivos con alta densidad de pixels

Las pantallas de equipos de sobremesa y portátiles tienen una densidad “estándar” de 72 o 96 puntos (pixels) por pulgada. Sin embargo, en los dispositivos móviles más recientes es habitual encontrar densidades mucho más altas, de 200 o incluso 300 pixels por pulgada, que permiten compensar las dimensiones de pantalla mucho más reducidas. Así, un Samsung Galaxy S4 tiene una resolución de 1080 x 1920 píxeles físicos, en una pantalla de 2,75 x 5,38 pulgadas, lo que resulta en una densidad de unos 250 pixels por pulgada.

Sin embargo, para asegurar la compatibilidad con otros dispositivos, los píxeles que se utilizan en las consultas de medios son pixels “CSS”. Así, la resolución del Samsung Galaxy S4 en píxeles CSS es de 360 x 640. Esto significa que hay tres pixels físicos por cada pixel CSS. En otros términos, la relación pixel físico a pixel CSS para este dispositivo es 3.

En una media query se puede utilizar la unidad “dppx” (dots per pixel) para escribir reglas CSS específicas para dispositivos con una determinada densidad de pixels. No todos los navegadores soportan todavía esta unidad, por lo que existen otras alternativas en función del tipo de navegador. Por ejemplo:

@media (-webkit-min-device-pixel-ratio: 2), /* Navegadores basados en Webkit */
       (min--moz-device-pixel-ratio: 2),    /* Navegadores Firefox anteriores a Firefox 16 */
       (min-resolution: 2dppx),             /* La nueva manera de especificar la densidad */
       (min-resolution: 192dpi)             /* También se puede usar "dpi" (dots per inch) */

Referencias

Mozilla developers – CSS Media Queries

www.w3.org – How to unprefix -webkit-device-pixel-ratio

wikipedia – Píxeles por pulgada

wikipedia – Puntos por pulgada

 Publicado por en 10:40 am

 Deja un comentario

(requerido)

(requerido)