移动web开发小记（像素）（物理像素）（css像素）（设备像素比）（ppl）

像素

1.1物理像素

手机屏幕横向有828个点

手机屏幕纵向上有1792个点

同等大小屏幕下，点越多、图像显示越精细

上面所说屏幕上一个个点就是物理像素（physical pixel）

物理像素也叫设备像素（dp:device pixel）
可见，每个像素就是一个点，每个点由红绿蓝三原色组成，只需要控制每个点每种颜色的明暗，就可以显示不同的颜色

实际开发中使用物理像素吗

同等屏幕大小的两个手机一个横向有2个物理像素，一个有4个物理像素如果使用物理像素，则很明显展示的效果不一样，在高清屏幕下，可能图片会显示的很小，设置都会看看不清楚。

1.2css像素

CSS 像素，也叫逻辑像素（logical pixel）

也成为 设备独立像素（dip:divice independent pixel）

我们在开发当中使用的就是CSS像素

.box {
  width: 1000px;
  height: 500px;
}

CSS像素与物理像素的关系

1. 在标清屏下，1个css像素使用1个物理像素展示
2. 在高清屏下，1个css像素使用4个物理像素表示
3. 高清屏下，4个点相当于标清屏下1个点的大小，所以说在高清屏下1个css像素使用4个物理像素表示点越多，展示的越精细，想想灯带。。。。

设备像素比

dpr=设备像素/CSS 像素（缩放比是1的情况下）

所以上面两种屏幕下的 dpr 分别为

1.3缩放

缩放改变的是CSS像素，毕竟我们没有法力

放大：

ppl

每英寸的物理像素点，

ppi:pixels per inch，可以根据勾股定律进行英寸。注意，因为手机不是正方形的，所以 6.1英寸只是大约值，实际计算时，可以使用 6.06dpi:dots per inch