Consultas de medios (media queries)

¡Atención! Esta lección está en elaboración. La información que ofrece es incompleta.

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

La recomendación CSS 3: Media queries, editada por Florian Rivoal, se aprobó el 19 de junio de 2012.

Actualmente (enero de 2016), el W3C está elaborando la recomendación CSS Device Adaptation Modules Level 1

Ancho de pantalla: min-width 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;
}

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, si no también la densidad de las pantallas.

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

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

Esta etiqueta fue creada por Apple y actualmente (enero de 20016) no está normalizada, pero se utiliza en la mayoría de navegadores de los móviles.

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

Referencias:

Diseño adaptativo (responsive design)

La traducción de responsive web design recomendada por Fundéu es diseño web adaptativo (consulta 1573, 31/01/13)

Herramientas: