如何计算CSS像素大小？
在深入CSS单元的过程中，我遇到了参考像素的定义。 但是，我无法find一个与CSS像素单元关系的一致和全面的描述。 我在这方面做了一些研究，但对我还是有点不清楚。
1.收集到的信息
1.1像素定义
像素有两种不同的types/定义：
“设备像素” – 显示屏上的单个物理点。
和：
CSS像素 – 最接近匹配参考像素的单位。 [ 1 ]
同名的两个平行的概念绝对不能澄清混淆。 我完全理解介绍第二个的目的，但我觉得它的命名误导。 CSS像素被分类为绝对单位，并且：
“绝对长度单位是固定的相互关系。” [ 1 ]
上面的说法对于像素以外的每个单元都是非常明显的。 遵循w3c规范：
“对于一个CSS设备来说，这些维度要么通过将物理单元与物理测量相关联，要么通过将像素单元与参考像素相关联来锚定（i）。
（…）请注意，如果锚点单位是像素单位，则物理单位可能与其物理测量值不匹配。 或者，如果锚单元是物理单元，则像素单元可能不映射到整个设备像素。“[ 1 ]
考虑到上述引文，我假设绝对单位不是绝对的，因为它们可能会锚定在参考像素上。
1.2参考像素
参考像素本身实际上是一个angular度测量[ 2 ]：
“参考像素是指像素密度为96dpi，距离arm距离为读数的设备上的一个像素的可视angular度，对于标称臂长为28英寸，视angular大约为0.0213度。 [ 1 ]
以下图片显示的是：
尽pipe将参考像素定义为视angular，我们可以进一步阅读：
“对于arm长度来说， 1px因此相当于大约0.26毫米（1/96英寸）” 。
抛开不一致的地方，我们能够build立一个angular度的价值：
α = 2 * arctan(0.026/142) = 0.02098° where: α — a value of the visual angle 因此显示单位的大小等于：
y = 2x * tan(0.01049°) where: y — a displayed unit size x — a reading distance
根据上面的公式，为了计算单位大小，我们需要确定实际的阅读距离。 由于用户可能会有所不同，因此其分类基于设备的DPI。
1.2.1新闻部
为了方便起见，我们假设DPI == PPI 。
这个测量允许我们猜测显示types。 快速检查：
- iPhone 6（ 4.7“ ，1334×750）： 326 ppi ;
- 索尼Bravia 4K（ 54.6“ ，3840×2160）： 75 ppi 。
所以，一般来说，越靠近用户所在的屏幕越大的PPI。 下面的表格[ 3 ]给出了具有特定DPI的设备的阅读距离推荐：
---------------------------------------
| DPI | 像素大小 | 阅读距离 |
-------------------------------------------------- ---
| PC的CRT | 96 | 〜0.2646毫米| 〜71厘米|
| 显示 | | | |
-------------------------------------------------- ---
| 笔记本电脑的LCD | 125 | 0.2032毫米| 〜55厘米|
| 显示 | | | |
-------------------------------------------------- ---
| 平板电脑 | 160 | 〜0.159毫米| 〜43厘米|
-------------------------------------------------- ---
但是，我不清楚这些距离值是如何得到的。 与function描述的DPI的关系还是仅仅是一个经验观察？
1.2.2设备像素比例
视网膜显示的推出使事情更加复杂化。 其PPI往往比非Retina大约大2倍，而推荐阅读距离应保持不变。 由于CSS像素大小不一定与设备像素大小相对应，因此我假设Retina显示屏上的单位大小首先被转换为参考像素大小 （以设备像素表示），然后乘以像素比率。 这是对的吗？
1.2.3缩放
放大时，显示的参考像素尺寸会增加[ 4 ]，如果距离显示器有一定距离，则会增大。 这很违反直觉，因为这意味着我们正在从屏幕上“走开”，而不是靠近它。
2.问题
结束我的怀疑和清晰的问题：
- 锚点单位是物理单位时，如何计算CSS像素大小？
- 如何build立DPI与阅读距离关系的公式？
- 如何计算非标准，高DPI / PPI设备（如打印机和视网膜显示器）的CSS像素大小？
另外，如果我的推理是无效的，或者我错过了一些东西，请纠正我。 感谢您的回复。
3.参考
- W3C规范
- inamidst.com，肖恩B.帕尔默的网站
- Mozzilla黑客
- 1uirksmode.org
我可能是错的，但我不认为这是可能的CSS像素的物理单位作为主播。
基于这篇文章：
px单位是CSS的魔法单位。 它与当前字体无关 ，也与绝对单位无关 。 px单位被定义为很小但是可见，并且可以显示具有尖锐边缘的水平1px宽的线（没有抗锯齿）。 什么是尖锐的，小的和可见的取决于设备和使用方式：你是否像手机一样靠近你的眼睛，像电脑显示器一样，或者像书本一样在中间的某个地方？ 因此px没有被定义为恒定的长度，而是取决于设备types和其典型用途。
更新：我错了。 目前在任何浏览器中都可能没有实现。 在确实如此的情况下，根据规范： “这些尺寸要么固定（i）通过将物理单位与其物理测量相关联”，意思是1px将等于物理英寸的1/96。
至于表格中的DPI与读取距离之间的关系，如果DPI = 96则读取距离约为71cm或28in，这些值成反比，意味着较高的DPI将导致较小的读取距离。
从这很容易拿出公式：
x = 125/96 y = 71/x where: x - ratio between second and first DPI value y - reading distance for second DPI value
对于更高分辨率的设备，Mozilla黑客文章中给出的例子较低：
以iPhone 4为例， 它配备了一个326 DPI显示屏。 根据我们上面的表格，作为智能手机，典型的观看距离为16.8英寸，基准像素密度为160 DPI。 为了创build一个CSS像素，Appleselect将设备像素比例设置为2，这有效地使iOS Safari以与在163 DPI电话上相同的方式显示网页。
这意味着我们有两个解决scheme – 物理（ppi）和CSS一个（cssppi）。 看来，cssppi用于计算参考像素大小，然后设备制造商select多less参考像素将映射到一个CSS像素（我假设这个数字等于设备像素比值，但不是100％肯定）。
下面是一些比较常用设备像素比例，ppi和cssppi的表格： http ://mydevice.io/devices/
有关更多信息和参考检查以下文章：
- 列表除 – 像素身份危机
- 每英寸像素和CSS Px
- 在智能手机，平板电脑和公司的CSS单位的物理尺寸
