Esto se menciona en todos los artículos sobre la web móvil, pero en ninguna parte puedo encontrar una explicación de qué mide exactamente este atributo.
¿Alguien puede explicar qué hacen las consultas como esta?

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-device-pixel-ratio: 3/2), 
only screen and (min-device-pixel-ratio: 1.5) {

    //high resolution images go here

}

Respuesta corta

La relación de píxeles del dispositivo es la relación entre píxeles físicos y píxeles lógicos. Por ejemplo, el iPhone 4 y el iPhone 4S informan una relación de píxeles del dispositivo de 2, porque la resolución lineal física es el doble de la resolución lineal lógica.

• Resolución física: 960 x 640
• Resolución lógica: 480 x 320

La formula es:

Dónde:

es la resolución lineal física

y:

es la resolución lineal lógica

Otros dispositivos informan diferentes proporciones de píxeles del dispositivo, incluidos los no enteros. Por ejemplo, el Nokia Lumia 1020 reporta 1.6667, el Samsumg Galaxy S4 reporta 3, y el Apple iPhone 6 Plus reporta 2.46 (fuente: dpilove ) . Pero esto no cambia nada en principio, ya que nunca debe diseñar para un dispositivo específico.

Discusión

El "píxel" de CSS ni siquiera se define como "un elemento de imagen en alguna pantalla", sino más bien como una medida angular no lineal del ángulo de visión, que es aproximadamente de una pulgada con el brazo extendido. Fuente: Longitudes absolutas CSS

Esto tiene muchas implicaciones cuando se trata de diseño web, como preparar recursos de imágenes de alta definición y aplicar cuidadosamente diferentes imágenes en diferentes proporciones de píxeles del dispositivo. No querría forzar a un dispositivo de gama baja a descargar una imagen de muy alta resolución, solo para reducirla localmente. Tampoco desea que los dispositivos de gama alta aumenten las imágenes de baja resolución para una experiencia de usuario borrosa.

Si está atascado con imágenes de mapa de bits, para acomodar muchas proporciones de píxeles de dispositivos diferentes, debe usar las consultas de medios CSS para proporcionar diferentes conjuntos de recursos para diferentes grupos de dispositivos. Combina esto con buenos trucos como background-size: covero establece explícitamente los background-sizevalores porcentuales.

Ejemplo

#element { background-image: url('lores.png'); }

@media only screen and (min-device-pixel-ratio: 2) {
    #element { background-image: url('hires.png'); }
}

@media only screen and (min-device-pixel-ratio: 3) {
    #element { background-image: url('superhires.png'); }
}

De esta manera, cada tipo de dispositivo solo carga el recurso de imagen correcto. También tenga en cuenta que la pxunidad en CSS siempre opera en píxeles lógicos .

Un caso para gráficos vectoriales

A medida que aparecen más y más tipos de dispositivos, se vuelve más difícil proporcionarles a todos los recursos de mapa de bits adecuados. En CSS, las consultas de medios son actualmente la única forma, y ​​en HTML5, el elemento de imagen le permite usar diferentes fuentes para diferentes consultas de medios, pero el soporte aún no es del 100% ya que la mayoría de los desarrolladores web todavía tienen que soportar IE11 por un tiempo más ( fuente: caniuse ) .

Si necesita imágenes nítidas para íconos, arte lineal, elementos de diseño que no sean fotos , debe comenzar a pensar en SVG, que se adapta perfectamente a todas las resoluciones.

Device Pixel Ratio == CSS Pixel Ratio

En el mundo del desarrollo web, la relación de píxeles del dispositivo (también llamada CSS Pixel Ratio) es lo que determina cómo el CSS interpreta la resolución de pantalla de un dispositivo.

El CSS de un navegador calcula la resolución lógica (o interpretada) de un dispositivo mediante la fórmula:

Por ejemplo:

Apple iPhone 6s

• Resolución real: 750 x 1334
• Relación de píxeles CSS: 2
• Resolución lógica:

Al ver una página web, el CSS pensará que el dispositivo tiene una pantalla de resolución de 375x667 y las Consultas de medios responderán como si la pantalla fuera de 375x667 . Pero los elementos renderizados en la pantalla serán dos veces más nítidos que una pantalla real de 375x667 porque hay el doble de píxeles físicos en la pantalla física.

Algunos otros ejemplos:

Samsung Galaxy S4

• Resolución real: 1080 x 1920
• Relación de píxeles CSS: 3
• Resolución lógica:

iphone 5s

• Resolución real: 640 x 1136
• Relación de píxeles CSS: 2
• Resolución lógica:

¿Por qué existe la relación de píxeles del dispositivo?

La razón por la que se creó la relación de píxeles CSS es porque las pantallas de los teléfonos obtienen resoluciones más altas, si cada dispositivo todavía tiene una relación de píxeles CSS de 1, las páginas web se volverán demasiado pequeñas para verlas.

Un monitor de escritorio típico de pantalla completa es de aproximadamente 24 "a una resolución de 1920x1080. Imagine si ese monitor se redujera a aproximadamente 5" pero tuviera la misma resolución. Ver cosas en la pantalla sería imposible porque serían muy pequeñas. Pero los fabricantes están saliendo con pantallas de teléfono de resolución 1920x1080 consistentemente ahora.

Por lo tanto, la relación de píxeles del dispositivo fue inventada por los fabricantes de teléfonos para que pudieran continuar presionando la resolución, la nitidez y la calidad de las pantallas del teléfono, sin hacer que los elementos en la pantalla sean demasiado pequeños para verlos o leerlos.

Aquí hay una herramienta que también te dice la densidad de píxeles de tu dispositivo actual:

http://bjango.com/articles/min-device-pixel-ratio/

https://developer.mozilla.org/en/CSS/Media_queries#-moz-device-pixel-ratio

-moz-device-pixel-ratio
Proporciona el número de píxeles del dispositivo por píxel CSS.

esto casi se explica por sí mismo. el número describe la proporción de la cantidad de píxeles "reales" (píxeles físicos de la pantalla) que se utilizan para mostrar un píxel "virtual" (tamaño establecido en CSS).

El artículo de Boris Smus High DPI Images for Variable Pixel Densities tiene una definición más precisa de la relación de píxeles del dispositivo: el número de píxeles del dispositivo por píxel CSS es una buena aproximación, pero no toda la historia.

Tenga en cuenta que puede obtener el DPR utilizado por un dispositivo con window.devicePixelRatio.