unidades - ¿Cómo se calcula un tamaño de píxel CSS?
unidades de medida en css (1)
Puedo estar equivocado, pero no creo que sea posible que el píxel CSS tenga la unidad física como un ancla.
Basado en this artículo:
La unidad px es la unidad mágica de CSS. No está relacionado con la fuente actual y tampoco con las unidades absolutas . La unidad px se define como pequeña pero visible, y de modo que se puede mostrar una línea horizontal de 1px de ancho con bordes afilados (sin suavizado). Lo que es nítido, pequeño y visible depende del dispositivo y de la forma en que se usa: ¿lo sostienes cerca de tus ojos, como un teléfono móvil, con los brazos extendidos, como un monitor de computadora, o en algún punto intermedio, como un libro? Por lo tanto, el px no se define como una longitud constante, sino como algo que depende del tipo de dispositivo y su uso típico.
ACTUALIZACIÓN: estaba equivocado. Es posible que no esté implementado en ningún navegador actualmente. En los casos en que ese sea el caso, según las especificaciones: "estas dimensiones están ancladas (i) al relacionar las unidades físicas con sus medidas físicas", lo que significa que 1px será igual a 1/96 de pulgada física.
En cuanto a la relación entre DPI y la distancia de lectura en la tabla, se requiere que si DPI = 96, la distancia de lectura es ~ 71 cm o 28 pulgadas y estos valores son inversamente proporcionales, lo que significa que un DPI más alto dará como resultado una distancia de lectura menor.
A partir de eso, es fácil encontrar una fórmula:
x = 125/96
y = 71/x
where:
x - ratio between second and first DPI value
y - reading distance for second DPI value
Para dispositivos de mayor resolución, hay un ejemplo más abajo en el artículo de Mozilla Hacks:
Tomemos el iPhone 4 como el ejemplo más famoso. Viene con una pantalla de 326 DPI. Según nuestra tabla anterior, como teléfono inteligente, su distancia de visualización típica es de 16.8 pulgadas y su densidad de píxeles de línea de base es de 160 DPI. Para crear un píxel CSS, Apple eligió establecer la proporción de píxeles del dispositivo en 2, lo que efectivamente hace que iOS Safari muestre páginas web de la misma manera que lo haría en un teléfono de 163 DPI.
Eso significa que tenemos dos resoluciones: física (PPI) y CSS una (cssppi). Parece que cssppi se usa para calcular el tamaño de píxel de referencia y luego los fabricantes de dispositivos eligen cuántos píxeles de referencia asignarán a un píxel CSS (supongo que este número es igual al valor de la relación de píxeles del dispositivo pero no 100% seguro).
Aquí hay una tabla con comparaciones para algunos dispositivos comunes: relación de píxeles, PPI y cssppi: http://mydevice.io/devices/
Para más información y referencias consulte los siguientes artículos:
Mientras profundizaba en las unidades CSS, encontré una definición del píxel de referencia. Sin embargo, no pude encontrar una descripción coherente y completa de su relación con la unidad de píxeles CSS. He investigado un poco sobre este asunto, pero aún no me queda claro.
1. Información recopilada
1.1 Una definición de píxel
Hay dos tipos / definiciones distintas de un píxel:
"Píxel del dispositivo" : un único punto físico en una pantalla.
Y:
Píxel CSS : una unidad que coincide más estrechamente con el píxel de referencia. [ 1 ]
Dos conceptos paralelos con el mismo nombre definitivamente no aclaran la confusión. Entiendo completamente el propósito de presentar el segundo, pero encuentro que su nomenclatura es engañosa. El píxel CSS se clasifica como una unidad absoluta y:
"Las unidades de longitud absoluta se fijan entre sí". [ 1 ]
La declaración anterior parece bastante obvia para cada unidad, excepto para el píxel. Siguiendo la especificación w3c:
"Para un dispositivo CSS, estas dimensiones están ancladas (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.
(...) Tenga en cuenta que si la unidad de anclaje es la unidad de píxeles, las unidades físicas podrían no coincidir 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 del dispositivo ". [ 1 ]
Considerando la cita antes mencionada, supongo que las unidades absolutas no son tan absolutas, ya que pueden estar ancladas al píxel de referencia.
1.2 El píxel de referencia
El píxel de referencia en sí mismo es en realidad una medida angular [ 2 ]:
"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 de brazo nominal de 28 pulgadas, el ángulo visual es, por lo tanto, de aproximadamente 0.0213 grados". [ 1 ]
Lo que se ilustra en la imagen a continuación:
A pesar de definir el píxel de referencia como un ángulo visual, podemos leer más:
"Para leer con el brazo extendido , 1px corresponde a aproximadamente 0.26 mm (1/96 pulgada) ".
Dejando de lado las inconsistencias, podemos establecer un valor del ángulo:
α = 2 * arctan(0.026/142) = 0.02098°
where:
α — a value of the visual angle
Por lo tanto, un tamaño de la unidad mostrada es igual a:
y = 2x * tan(0.01049°)
where:
y — a displayed unit size
x — a reading distance
Dada la fórmula anterior, para calcular el tamaño de la unidad, necesitamos determinar cuál es la distancia de lectura real. Como puede variar entre usuarios, su categorización se ha basado en el DPI de un dispositivo.
1.2.1 DPI
Por conveniencia, supongamos que
DPI == PPI
.
Esta medida nos permite adivinar un tipo de pantalla. Comprobación rápida:
- IPhone 6 ( 4.7 " , 1334 × 750): 326 ppi ;
- Sony Bravia 4K ( 54.6 " , 3840 × 2160): 75 ppi .
Entonces, en general, cuanto mayor es el PPI, más cerca de la pantalla se sienta un usuario. La tabla a continuación [ 3 ] presenta recomendaciones de distancia de lectura para dispositivos con DPI particular:
——————————————————————————————————————— | DPI | Pixel size | Reading distance | ————————————————————————————————————————————————————— |PC''s CRT | 96 | ~0.2646 mm | ~71 cm | |display | | | | ————————————————————————————————————————————————————— |Laptop''s LCD | 125 | 0.2032 mm | ~55 cm | |display | | | | ————————————————————————————————————————————————————— |Tablet | 160 | ~0.159 mm | ~43 cm | —————————————————————————————————————————————————————
Sin embargo, no está claro para mí cómo se obtuvieron esos valores de distancia. ¿La relación con DPI se describe con una función o es solo una observación empírica?
1.2.2 Relación de píxeles del dispositivo
La introducción de la pantalla Retina complicó aún más el asunto. Su PPI tiende a ser aproximadamente 2 veces más grande que el que no es Retina, mientras que la distancia de lectura recomendada debe permanecer igual. Dado que un tamaño de píxel CSS no se corresponde necesariamente con un tamaño de píxel del dispositivo, supongo que el tamaño de la unidad en la pantalla Retina se traduce primero a un tamaño de píxel de referencia (expresado en píxeles del dispositivo) y luego se multiplica por la proporción de píxeles. ¿Es correcto?
1.2.3 Zoom
Mientras se acerca, el tamaño de píxel de referencia visualizado aumenta [ 4 ], por lo tanto, aumenta la distancia desde una pantalla. Es bastante contradictorio, porque significa que estamos "alejándonos" de la pantalla, no acercándonos a ella.
2. Preguntas
Concluyendo mis dudas y articulando preguntas:
- ¿Cómo se calcula un tamaño de píxel CSS cuando la unidad de anclaje es una unidad física?
- ¿Cómo establecer la fórmula para una relación entre DPI y una distancia de lectura?
- ¿Cómo se calcula un tamaño de píxel CSS para dispositivos no estándar de alto DPI / PPI como impresoras y pantallas Retina?
Además, corríjame si mi razonamiento no es válido o me falta algo. Gracias por las respuestas
3. Referencias
- Especificación W3C
- inamidst.com, el sitio de Sean B. Palmer
- Mozzilla Hacks
- 1uirksmode.org