Consultas de medios (media queries)

En construcciónEsta lección se encuentra en elaboración.

Las consultas de medios permiten detectar características del dispositivo que está utilizando el usuario y optimizar la hoja de estilo.

Diseño adaptativo (responsive design)

Al diseñar una página web, se debe tener en cuenta la diversidad de dispositivos en los que se va a ver esa página web:

En los últimos años se ha acuñado el término responsive web design para referirse a las técnicas de diseño que se preocupan por tratar esta diversidad. En español responsive web design se suele traducir por diseño web adaptativo (o al menos, es lo que recomienda la Fundéu, consulta 1573, 31/01/13).

Las consultas de medios (media queries) de las hojas de estilo que se comentan en esta lección son una herramienta básica para un diseño adaptativo.


Herramientas:

Recomendaciones

Las recomendaciones HTML 4.01 y CSS 2 ya incluían etiquetas y propiedades que permitían adaptar la página web a los tipos de medios, pero de manera muy básica.

La recomendación CSS 3: Media queries, editada por Florian Rivoal, se aprobó el 19 de junio de 2012. Esta recomendación ampliaba las posibilidades de adaptación al permitir obtener detalles sobre las caraterísticas de los dispositivos.

Actualmente (enero de 2017), el W3C está elaborando la recomendación CSS Device Adaptation Modules Level 1, dedicada específicamente a las características de las pantallas.

Densidad de píxeles: etiqueta meta viewport

La densidad de píxeles de una pantalla es el número de píxeles por unidad de distancia (aunque no sea lo mismo, también se utiliza con el mismo significado la expresión de puntos por unidad de distancia. Las unidades más utilizadas son PPI (píxeles por pulgada) y DPI (puntos por pulgada).

Los monitores de escritorio suelen tener más o menos 96 DPI, pero los dispositivos móviles incorporan pantallas de alta densidad, de 300 DPI o más.

Eso complica bastante el diseño, pues no sólo se tienen que tener en cuenta los anchos de las pantallas, sino también la densidad de píxeles.

Una forma de simplificar el diseño es incluir en la página web la etiqueta meta viewport:

<head>
  ...
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  ...
</head>

Esta etiqueta hace que en dispositivos con pantallas de alta densidad el navegador aplique automáticamente un zoom que facilite la lectura.

Esta etiqueta fue creada por Apple en 2007 (veáse referencia), aunque rápidamente fue adoptada por todos los navegadores de los móviles. Por ello, se recomienda incluir esta etiqueta en todas las páginas web. En estos apuntes se ha incluido en la plantilla de página web básica.

La regla arroba @viewport

La etiqueta meta viewport no forma todavía parte de ninguna recomendación ya aprobada, aunque la futura recomendación CSS Device Adaptation Module Level 1 (actualmente, enero de 2017, en elaboración) define la regla arroba @viewport, que está inspirada por la etiqueta meta viewport pero está pensada tanto para navegadores de móviles como de escritorio.

El borrador nombra la etiqueta meta viewport y la declara equivalente a un caso particular de la regla arroba @viewport. En el futuro, cuando esta recomendación sea implementada en los navegadores, se podrá sustituir la etiqueta meta viewport de todas las páginas por la regla arroba @viewport en la hoja de estilo.


Referencias:

Hojas de estilo específicas: etiqueta link media

HTML 4 y CSS 2 ya permitían enlazar hojas de estilo específicas para los diferentes tipos de dispositivos.

<head>
  ...
  <link rel="stylesheet" type="text/css" media="screen" href="pantalla.css" />
  <link rel="stylesheet" type="text/css" media="print" href="impresora.css" />
  ...
</head>

Los tipos de dispositivos definidos en HTML 4.01 eran: screen (pantallas), tty (pantallas de muy baja resolución y en blanco y negro), tv (pantallas de baja resolución y sin barras de desplazamiento, aunque con color), projection (proyectores), handheld (pantallas pequeñas y en blanco y negro), print (papel), braille (pantallas braille táctiles), aural (sintetizadores de voz) y all (todos). En CSS 2.1 se declaraba aural obsoleto y se añadían embossed (impresoras braille) y speech (sintetizadores de voz), además de definir grupos de medios.

Características del dispositivo: media queries

La recomendación CSS 3: Media queries define toda una serie de características de medios (media features) que corresponden a características del dispositivo. Estas son algunas de ellas:

Estas características no permiten modificar las características físicas del dispositivo, lógicamente, pero toman como valor la característica del dispositivo.

Algunas características tienen variantes con prefijos min- y max- para expresar comparaciones sin tener que utilizar desigualdades < y > que en HTML son caracteres especiales.

Esas propiedades se combinan con la regla arroba @media para condicionar la aplicación de propiedades a características del dispositivo.

Se pueden combinar varias características mediante el operador and y la coma (que representa el operador lógico or) para crear expresiones más complejas.

Notas:

Ancho de pantalla: min-width y max-width

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.

El ejemplo siguiente muestra una hoja de estilo que modifica el tamaño de h1 dependiendo de si la pantalla tiene menos o más de 1024px de ancho.

@media screen and (max-width: 1024px){
  h1 {
    font-size: 200%;
  }
}

@media screen and (min-width: 1024px){
  h1 {
    font-size: 400%;
  }
}

h1 {
  text-align: center;
}