像素知识

物理像素： 也是设备像素， 单位是pt，绝对单位。1pt就是一个会发光的点。设备出厂的时候就已经确定， 不会再改变。在我们的常识中反应为 分辨率，例如1920 * 1080分辨率指的就是这个设备有1920*1080个pt

css 像素： 设备独立像素， 逻辑像素。代表了可以通过程序控制的像素。

px是一个相对单位。大小会随着屏幕物理特性的改变，而变得不确定。 css像素的大小由物理像素所决定。 例如打印机的物理像素是一个墨点的大小。用户的缩放也会改变css像素在屏幕上的表现。

屏幕尺寸： 对角线的长度。 1inch =2.54cm. 屏幕尺寸 = 屏幕对角线经过的像素数量 / PPI（pixel per inch ） **注意是1inch面积上的像素数量 **。

以5.5英寸iphone6+为例， PPI 为 401， 即每英寸 401个物理像素点。 w = 1080, h = 1920
对角线上的像素个数： Math.sqrt(Math.pow(1080, 2) * Math.pow(1920, 2)) = 2202.90717
用它除以PPI: 2202.90717 / 401 = 5.49353

PPI: 固定的参数。PPI越大， 屏幕越清晰。PPI翻一倍，容纳像素量提升四倍。像素所占大小缩小为1/4

720P: 1280 * 720
1080P: 1920 * 1080
4K: 4096 * 2160
5K: 5120 * 2880

像素比： DPR = 物理像素 / css像素。它反映了一个css像素， 占据多少个物理像素。 可以使用window.devicePixelRatio获取。

以iphone6为例
物理像素： 750 * 1334
dpr：2
所以： css像素： 375 * 677

再例如， 折腾一下， 把我1920*1080的屏幕（dpr = 1）， 分辨率调成800 * 600. 然后 这 800要占满整个屏幕， 那就说明，800px每一个像素都要被放大， 那也就是说1px = 1920 / 800这么多个物理像素。 自然就不清晰了