CSS: Consultas de medios (media queries)

En esta lección se comentan las propiedades CSS definidas en la recomendación Media Queries Level 3 (3ª ed), publicada en mayo de 2024.

Estas propiedades permiten obtener detalles sobre las características del dispositivo del usuario y adaptar y optimizar la hoja de estilo a ellas.

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:

Densidad de píxeles: etiqueta meta viewport

El atributo viewport de la etiqueta meta no forma parte de ninguna recomendación ya aprobada, pero formará parte de la futura recomendación CSS Viewport Module Level 1 (actualmente, septiembre de 2024, en elaboración) y es admitido por los navegadores.

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 (véase 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.

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" media="screen" href="pantalla.css">
  <link rel="stylesheet" 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" media="screen" href="pantalla.css">
  <link rel="stylesheet" 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; }
Enlace externo

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

La recomendación Media Queries Level 3 (3ª ed), publicada en mayo de 2024, no define los tipos de dispositivos, ya que es una versión con pequeñas correcciones de la recomendación CSS 3: Media queries, publicada en 2012, que hacía simplemente referencia a los tipos de dispositivos 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, septiembre de 2024, 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 Media Queries Level 3 (3ª ed) 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;
  }
}
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 de 400px de ancho, entre 400px y 500px de ancho, 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;
  }
}
Enlace externo

Los valores de ancho de pantalla en los que cambian las propiedades 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;
  }
}
Enlace externo