Consultas de medios (media queries)

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 características de los dispositivos.

Actualmente (noviembre de 2017), el W3C está elaborando dos recomendaciones relacionadas:

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 etiqueta meta viewport no forma parte de ninguna recomendación ya aprobada, pero formará parte de la futura recomendación CSS Device Adaptation Module Level 1 (actualmente, noviembre de 2017, en elaboración).

La regla arroba @viewport

La futura recomendación CSS Device Adaptation Module Level 1 (actualmente, noviembre 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 declara la etiqueta meta viewport 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. Al añadir el atributo media al enlace a la hoja de estilo, el navegador aplica esa hoja de estilo únicamente cuando el documento se muestra en ese dispositivo.

<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.

Abra el siguiente ejemplo en una pestaña aparte y en la vista previa de impresión compruebe que se cambia el tipo de letra y el estilo del título.

<head>
  ...
  <link rel="stylesheet" type="text/css" media="screen" href="pantalla.css" />
  <link rel="stylesheet" type="text/css" media="print" href="impresora.css" />
  ...
</head>
/* pantalla.css */
body { font-family: sans-serif; }

h1 { text-align: center; text-transform: uppercase; }
/* impresora.css */
body { font-family: serif; }

h1 { text-decoration: underline; }
ERROR (no puede mostrarse el objeto)
Enlace externo

La idea de definir tipos de dispositivos no ha dado buen resultado, ya que las características de los dispositivos del mismo a veces son muy diferentes y distintos tipos de dispositivos tienen características comunes. Por eso, en las recomendacioner posteriores se ha reducido el número de dispositivos y creado nuevas propiedades relacionadas con las caracterísiticas de los dispositivos (tamaños, resoluciones, número de colores, etc.).

La recomendación CSS 3: Media queries, publicada en 2012, no definía los tipos de dispositivos, ya que estaban definidos en la recomendación HTML 4.01. Las recomendaciones HTML 5 y posteriores ya no incluían una lista de tipos de dispositivos, que se encuentra ahora en la recomendación Media Queries Level 4 (actualmente, noviembre de 2017, en elaboración). En ella, ya sólo se consideran los tipos all (pantallas), print, screen (pantallas) y speech.

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. Las más importantes son:

Estas características no permiten modificar las características físicas del dispositivo, lógicamente. Lo que hacen es tomar como valor las características del dispositivo, de una forma dinámica.

Algunas características tienen variantes con prefijos min- y max- para expresar comparaciones sin tener que utilizar los caracteres menor o mayor (< 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 color de fondo de la página dependiendo de si la pantalla tiene menos o más de 500px de ancho.

@media screen and (max-width: 500px) {
  body {
    background-color: lightblue;
  }
}

@media screen and (min-width: 500px) {
  body {
    background-color: lightcoral;
  }
}
ERROR (no puede mostrarse el objeto)
Enlace externo

El ejemplo siguiente muestra una hoja de estilo que modifica el color de fondo de la página dependiendo de si la pantalla tiene menos o más de 500px de ancho.

@media screen and (max-width: 400px) {
  html {
    background-color: lightblue;
  }
}

@media screen and (min-width: 400px) and (max-width: 500px) {
  html {
    background-color: lightcoral;
  }
}

@media screen and (min-width: 500px) {
  html {
    background-color: lightgreen;
  }
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Los valores de ancho de pantalla se denominan en inglés breakpoints. Cuantos más incluyamos, mejor podremos adaptar nuestras páginas web a diferentes dispositivos.

Referencias:

Orientación de pantalla: orientation

La característica de medios orientation toma dos posibles valores:

El ejemplo siguiente muestra una hoja de estilo que modifica el color de fondo de la página dependiendo de si el ancho es mayor que el alto.

@media (orientation: portrait) {
  html {
    background-color: lightblue;
  }
}

@media (orientation: landscape) {
  html {
    background-color: lightcoral;
  }
}
ERROR (no puede mostrarse el objeto)
Enlace externo