移动端知识之 —— 像素

像素密度

我们看的屏幕都是由一个一个的像素点组成的，之前我们一直说的分辨率都是指实际像素尺寸，比如： 1920*1080.每个点发出不同的光就构成了我们所看的画面。

而手机屏幕的物理尺寸和像素尺寸是不一样的。比如：

所以我们要引入一个概念了： 像素密度（PPI）。

PPI: 准确的说是每英寸的长度上排列的像素点数量。1英寸是一个固定长度，等于2.54厘米.

像素单位

• px : 逻辑像素，浏览器使用的抽象单位
• dp,pt: 设备无关像素,设备像素（物理像素），可以理解为实际的像素
• dpr: 设备像素比 ,(缩放比)

- dpr=2 的话，那么1px由4个设备像素显示，如果是10px，那么显示设备实际用40个dp去显示10px；
- dpr=1，则1px由1个设备像素显示；

用iPhone 3gs和4s来举例。3gs的缩放比是1倍，而4s（Retina屏）的缩放比是2倍，所以Retina屏幕把2x2个像素当1个像素使用，这也是为什么4s比3gs的画质清晰了。

在以前，资源图片中，同一张图通常有两个尺寸。你会看到文件名有的带@2x字样，有的不带。其中不带@2x的用在普通屏上，带@2x的用在Retina屏上。

计算公式一

1px = (dpr)^2 * dp

dpr = 2 的情况下【ipone 5】：（1个css像素就等于四个物理像素）

计算二

• DPI 打印机每英寸可以喷的墨汁点
• PPI 屏幕每英寸的像素数量，即单位英寸内的像素密度

如图所示，像素密度在120左右的屏幕归为ldpi，160左右的归为mdpi，以此类推。这样，所有的Android屏幕都找到了自己的位置，并赋予了相应的倍率：

ldpi
mdpi
hdpi
xhdpi
xxhdpi
xxxhdpi

经验总结

1. 我们在开发中一般尽可能使用iphone 6s来当作测试页面
2. 设计师给我们的图纸一般都是使用像素尺寸来作图的
3. 我们的话一般还是使用物理尺寸（设备尺寸）来直观感受和设计页面
4. 由于iphone6s的缩放比例是2倍，因此我们使用的css像素就可以是设计图纸像素的一半。