html - toma - ¿Es un píxel CSS realmente una unidad absoluta? Es decir, es 1 pulgada=96px verdad?
unidades de medida absolutas y relativas en css (3)
La documentación oficial del W3C dice:
1 px = 1/96 de 1 en
En mi pantalla anterior de 18.5 pulgadas, el screen.width la screen.width era de 1367 px y el ancho de la pantalla en pulgadas era de 14 inches . Por la fórmula W3C:
14 * 96 px = 1344 px
La fórmula W3C se desvió en 20/14 px per inch . Dado que la desviación es demasiado baja, y 1 inch en mi pantalla fue de 97.4 px la fórmula W3C y creí que un píxel CSS es una absolute unit of measure , lo que significa que siempre es igual a 0.75 pt (una unidad física).
Esta semana compré una pantalla Full HD de 21.5 pulgadas, que tiene un ancho de 19 inches y un ancho 19 inches screen.width 1920 px . Así que ahora 1 inch en mi pantalla es:
1920/19 ~ 101 px
No solo esto, la pantalla de mi amigo es de 24 pulgadas y tiene la misma resolución de 1920 x 1080. Tanto 24 pulgadas como 21.5 pulgadas no pueden corresponder a la misma cantidad de píxeles CSS.
Así que ahora, en mi pantalla, los píxeles CSS no son una unidad de medida absoluta. Y todo es relativamente más pequeño en mi pantalla. Incluso eso, ahora me dejan engañar por el tamaño de mis fuentes. Cuando encuentro 16 px como fuente legible mínima en mi pantalla, en realidad es más grande en pantallas más pequeñas. Debido a que 16 px en mi pantalla es físicamente igual en centímetros que 14px en centímetros en mi pantalla anterior más pequeña. Estoy diseñando mal mis sitios web y ya no soy un buen desarrollador front-end.
Así que la pregunta:
- ¿Es un píxel CSS realmente una unidad absoluta? Es decir, es 1 pulgada = 96 px verdad?
Como se especificó un poco más abajo en la parte del Módulo de Valores y Unidades de CSS que ya ha vinculado, hay dos implementaciones diferentes que se pueden aplicar con CSS:
Para un dispositivo CSS, estas dimensiones están ancladas
yo. relacionando las unidades físicas con sus medidas físicas, o
ii. relacionando la unidad de píxel con el píxel de referencia.
Esto pasa a la nota:
Si la unidad de anclaje es la unidad de píxeles, es posible que las unidades físicas no coincidan con sus medidas físicas . Alternativamente, si la unidad de anclaje es una unidad física, es posible que la unidad de píxeles no se asigne a un número entero de píxeles de dispositivos .
Y finalmente, concluye:
El píxel de referencia es el ángulo visual de un píxel en un dispositivo con una densidad de píxeles de 96 ppp y una distancia del lector de la longitud de un brazo. Para una longitud nominal de brazo de 28 pulgadas, el ángulo visual es, por lo tanto, alrededor de 0.0213 grados. Para la lectura a la distancia del brazo, 1 px corresponde a aproximadamente 0,26 mm (1/96 pulgada) .
Esto significa que la unidad de píxeles es una longitud absoluta, pero su longitud puede cambiar dependiendo de si el dispositivo aplica la implementación i o la implementación ii de la primera parte que he citado aquí.
Una longitud absoluta , tal como se define en el Módulo de Valores y Unidades de CSS, es simplemente una longitud que está "anclada a alguna medida física". La medida física será su longitud física real o la longitud derivada del píxel de referencia.
La misma sección de la especificación también dice:
Para los medios impresos y dispositivos de alta resolución similares, la unidad de anclaje debe ser una de las unidades físicas estándar (pulgadas, centímetros, etc.). Para dispositivos de resolución más baja y dispositivos con distancias de visualización inusuales, se recomienda que la unidad de anclaje sea la unidad de píxeles. Para tales dispositivos, se recomienda que la unidad de píxeles se refiera a la cantidad total de píxeles de dispositivos que mejor se aproxima al píxel de referencia.
96px no siempre será igual a 1 pulgada de la vida real.
No, px es una unidad relativa. Como el tamaño de píxel es diferente para diferentes tamaños de pantalla, ellos (tal vez W3C) establecen un estándar para px como una unidad relativa.
Una unidad de píxeles Css no es necesariamente una medida física de píxeles (en mi respuesta, me dirijo a css px para pantallas y no para imprimir)
Para un dispositivo CSS, estas dimensiones se anclan (i) al relacionar las unidades físicas con sus medidas físicas, o (ii) al relacionar la unidad de píxeles con el píxel de referencia.
En la explicación anterior, el píxel de referencia se explica a continuación.
El píxel de referencia es el ángulo visual de un píxel en un dispositivo con una densidad de píxeles de 96 ppp y una distancia del lector de la longitud de un brazo. Para una longitud nominal de brazo de 28 pulgadas, el ángulo visual es, por lo tanto, alrededor de 0.0213 grados. Para la lectura a la distancia del brazo, 1 px corresponde a aproximadamente 0,26 mm (1/96 pulgada).
mas explicacion esta here
Para un ejemplo simple vamos a tomar un iPhone
Phy px 750 x 1334
CSS px 375 x 667
Como se puede ver, las medidas físicas de px son completamente diferentes de las de Css px. La relación entre el píxel físico real y el píxel css se denomina relación de píxeles, que se determina en función del ángulo de visión, la distancia desde la que se ve y la resolución de la pantalla.
Al final del día, el proveedor de hardware tiene este conjunto en función de los aspectos mencionados anteriormente.
Aquí está el link a la lista de dispositivos con phy px, css px y su proporción de píxeles.
El objetivo de todo esto es tener una pantalla más consistente a través de diferentes hardware.
Y finalmente como señala la documentación de w3.org:
Tenga en cuenta que esta definición de la unidad de píxeles y las unidades físicas difiere de las versiones anteriores de CSS. En particular, en versiones anteriores de CSS, la unidad de píxeles y las unidades físicas no estaban relacionadas por una proporción fija: las unidades físicas siempre estaban vinculadas a sus medidas físicas, mientras que la unidad de píxeles variaría para coincidir más estrechamente con el píxel de referencia. (Este cambio se realizó porque demasiado contenido existente se basa en la suposición de 96 ppp, y romper esa suposición rompe el contenido).
En versiones anteriores, el píxel Css se basaba en gran medida en el píxel de referencia, que se basaba en el supuesto de que siempre tenía 96 ppp. En su lugar, css px y phy px están relacionados por la relación de píxeles.
Espero que esto ayude.