设备像素、设备独立像素
因为最近准备开始着手移动端的学习，所以对之前一直一知半解的像素问题来了更认真的学习，这个过程里看了很多人的博客文章，也查了一些资料，所以就想写这样一篇文章来帮助尚不理解这些概念的朋友。
1、设备像素（device pixels 简称DP）：顾名思义，这种像素是由设备本身决定的，或者说是由生产商决定的，出厂之后就已经确定下来，其含义是设备屏幕横向和纵向各排布了多少个像素点。单位为pt 。
由设备像素我们又引申得到一个PPI（pixels per inch）的概念，也是字面意思，每英寸上有多少个设备像素。譬如：对于iPhone6来说，其屏幕尺寸为4.7英寸（屏幕尺寸指的是屏幕的对角线长度，即iPhone6屏幕对角线长度为4.7英寸），分辨率为1334*750（分辨率的含义：指屏幕上有1334行*750列的设备像素点），所以利用勾股定理很容易得到对角线上的设备像素点的个数为1530.38个，除以对角线长度即可得到PPI=326，这与苹果公司给出的PPI参数基本一致。
由此我们可以知道对于移动设备而言，他的PPI值越大，那么设备像素点越细密，显示的结果也就越精细。
不同机型iPhone的PPI参数
2、设备独立像素（device independent pixels 简称DIP）。字面意思进行理解，就是独立于设备的一个参数，它与一个设备的自身性质无关，只是人为定出来的一个物理量，至于其作用就是让开发者可以用一套数据来对付不同的移动设备，具体如何实现下文会有详述。
若我们采用设备像素（DP）作为我们开发时的单位，那么会有什么样的后果？试想如果我们要在页面上插入一张图片，要让这张图片在不同设备上都布满全屏，此处仅选出两款机型：iPhone3GS和iPhone4，这两款手机的屏幕大小相同，都为3.5英寸，但是区别在于二者的分辨率，iPhone3GS的分辨率为480*320（计算可得PPI为163），iPhone4的分辨率为960*640（PPI为326）。首先来看如何布满一个iPhone3GS屏幕，以设备像素为单位，我们应设定图片大小为：height：480pt；width：320pt，而对于iPhone4而言应该设为：height：960pt；width：640pt。在实际情况中，我们所要适配的不仅仅是这两种屏幕，那么就需要相应地写更多的代码，这样显然是不方便的。那么我们可不可以一劳永逸呢，统一设为一个值，但却能在不同PPI的屏幕上显示效果都一样呢？这就需要设备配合了。
前人想出来一个新的像素单位，也即是设备独立像素（在实际开发中使用的CSS中的像素就是设备独立像素中的一种，我们此处也用他来举例，CSS像素的单位为px），他与设备无关。譬如刚刚那个例子，我就要把图片的大小设为宽度320高度480（当然这时候的单位要换成px了，如果还是pt的话，那么iPhone4上面图片的宽高都只有一半大小了），但是你们不同设备必须给我显示出一样大小的图片，那怎么办？好办！我iPhone3GS就把你的px单位看成是pt单位，所以我就用480行320列的像素点来显示这张图片，OK满屏显示。那你iPhone4怎么办呢，那你就用4个设备像素点当做一个CSS像素点用呗，意思就是iPhone4这个设备心理要有点b数，自己的分辨率太高啦，设备像素点太小啦，要是一个设备像素点当成一个CSS像素点来显示的话，那图片的宽高都只有iPhone3GS设备上图片的一半了，那么当我看到px这个单位的时候我就要主动的用四个设备像素点去显示一个CSS像素点，这样图片大小就和iPhone3GS一样了。看到这里大伙应该有点理解为什么搞出一个设备独立像素了吧，这可不是没事找事弄出一个概念。所以要让不同设备上显示效果一致有两个条件：首先是需要使用设备独立像素作为单位，也就是我们平时所用的CSS像素，其次需要设备的配合，不同的设备要根据自己的PPI来做出相应的反应。
不同机型显示对比
在这里我必须再给大家介绍一个概念了，就是DPR（device pixel ratio），意思就是设备像素与CSS像素的比值，譬如iPhone3GS用一个设备像素点表示一个CSS像素，那么他的DPR就是1，而iPhone4用2*2个设备像素表示一个CSS像素，那么他的DPR就是2。每个设备有了这个值以后，当他拿到CSS像素以后就可以知道自己要相应的要用多少的设备像素去表示了，这样就实现了不同设备的显示效果相同。
网友评论