¿Por qué el píxel de consulta de medios es la mitad del valor del píxel especificado?

En mi opinión, necesitamos explorar algunos aspectos de la historia de los monitores y pantallas.

Tamaño temprano

Las primeras imágenes digitales estaban hechas de elementos de imagen realmente grandes, píxeles, debido a la pobre potencia de procesamiento.

A medida que evolucionó la potencia de procesamiento, puede procesar más píxeles en una pantalla, por lo tanto, menos notable.

Estandarización de la "dimensión de píxeles"

En algún momento, el tamaño de píxel era lo suficientemente bueno, por lo que ahora se podían usar más píxeles para pantallas más grandes, manteniendo de alguna manera una densidad de píxeles promedio (cuántos píxeles había en una unidad física, una pulgada).

Un ejemplo es que podrías encontrar por ejemplo computadoras usando, digamos, 800x600px en un monitor de 15 pulgadas o 1024x768 en uno de 17 pulgadas un sistema mejorado.

Estos serían los tiempos en que Windows definió su resolución en 96 PPI como superior a los 72 PPI definidos por Apple en los sistemas Apple anteriores...

Proyección

Durante todo este tiempo, los píxeles solo se proyectaron en monitores de rayos catódicos; de manera analógica, no eran parte intrínseca del monitor, de la pantalla.

Píxel como hardware

Luego, las pantallas digitales entraron en juego. Los monitores de plasma y LCD tenían una matriz nativa específica de elementos de visualización.

Ahora, el tamaño mínimo de un elemento mostrado de una imagen se definió por el tamaño real de estos elementos de visualización. Donde la proyección de los píxeles una vez definió la resolución, ahora fueron definidos por estos elementos de visualización.

El término píxel ya estaba establecido. No se inventó ningún término nuevo para estos elementos de visualización controlados digitalmente ... Y comenzó la confusión.

CSS

La especificación CSS comenzó cuando las pantallas todavía estaban basadas en CRT y en un momento en que la densidad de píxeles era más o menos estable.

Así que usar px como unidad fue una idea razonablemente buena. De hecho fue una mejor idea que la anterior, usando la "unidad mediana". Esta unidad fue definida solo por el navegador, a lo que los desarrolladores consideraron "medio". Para evitar estas discrepancias, la gente usaba cada vez más la unidad px, que era lo suficientemente estable.

Más poder de procesamiento

Como la miniaturización de los componentes hizo realidad la portabilidad, esta potencia adicional no se usó solo para pantallas más grandes, ahora se usó para el uso original... más definición usando píxeles más pequeños.

Como estrategia de marketing, Apple utiliza el concepto de pantalla retina para enfatizar la resolución utilizando pequeños elementos de visualización.

Pero a medida que reduce el tamaño de píxel, no puede usarlo para definir el tamaño del texto, porque su texto sería pequeño e ilegible.

Más ingredientes para la ensalada.

Hay diferentes "píxeles" involucrados ahora. Los elementos de visualización, el elemento de imagen digital real en el caso de las imágenes y las unidades px CSS.

Para solucionar esto añadimos más ingredientes a la ensalada... activos 2x y 3x, píxeles reales y píxeles declarados...

ahora la respuesta a tu pregunta

unidad declarada

Un teléfono (o pantalla) necesita declarar al navegador un tamaño de píxel, para ser utilizado como referencia para las unidades CSS.

Esta es la unidad más pequeña. 375px en este caso. Esta unidad es la que se utiliza para definir, por ejemplo, el tamaño del texto y el tamaño de las imágenes que se mostrarán en la pantalla.

resolución de hardware

Y esta es la capacidad real de la pantalla debido a las dimensiones físicas de sus elementos de visualización. Normalmente es una pantalla FullHD más grande o más pequeña en tamaño físico según el modelo.

Esta resolución es mayor que la declarada, y esta potencia adicional se usa para dar más definición al texto, y detrás de escena para extraer un activo de mayor resolución... una imagen de 2x o una de 3x.

Ancho de píxel != ancho físico.

Aunque una pantalla retina, como un iPhone, duplicará el ancho físico de un dispositivo por píxeles , luego se reducirá para ajustarse al ancho físico (aumentando la densidad de píxeles ), las pantallas retina no alteran las dimensiones físicas reales de la pantalla. es el iPhone el que duplica el tamaño del ancho del dispositivo, no Firefox que divide el tamaño de la imagen por la mitad.

Las consultas de medios se basan en anchos físicos .

_{(Los anchos físicos generalmente se establecen usando 1 punto = 1 píxel. Por lo tanto, 375 píxeles de ancho para un dispositivo en realidad significaría que el ancho físico está cerca de 375 puntos, no realmente píxeles)}