基础知识点
设备像素：设备像素又称物理像素（physical pixel），设备能控制显示的最小单位，我们可以把这些像素看作成显示器上一个个的点。 iPhone5的物理像素是640X1136。
PS：在普通屏幕下，1个css像素对应1个物理像素(1:1)。
在超高像素密度屏幕（Retina显示屏）下，1个css像素对应4个物理像素(1:4)。（这里指专指苹果超高清屏幕）
因此，在移动端方面就需要设置dpr来保证超高清屏显示图片不会失真。
逻辑像素（ logical pixel）独立于设备的用于逻辑上衡量像素的单位。css像素就是逻辑像素，CSS像素是Web编程的概念。iPhone5的逻辑像素是320X568。
设备独立像素 （density-independent pixel） 简称 dip，单位dp，独立于设备的用于逻辑上衡量像素的单位 。
PS：逻辑像素 ≈ 设备独立像素。（设备独立像素是android提出的）
设备像素比 (device pixel ratio)
设备像素比 = 设备像素 / 设备独立像素 // 在某一方向上，x方向或者y方向
iphone5 为例： 640X1136 / 320X568 = 2
屏幕像素密度（Pibel Per Inch）简称 ppi ，单位是 dpi，一般用来计量电脑显示器，电视机和手持电子设备屏幕的精细程度。通常情况下，每英寸像素值越高，屏幕能显示的图像也越精细。
屏幕像素密度=屏幕宽度（或高）像素 / 英寸宽屏幕（或高）英寸
关于设计与开发之间关系
网页设计师按照设备像素为单位制作设计稿。
前端工程师按照设备像素比进行换算后的逻辑像素为单位制作网页。
如：设计图里有元素宽度是100px，那么得到宽度会是 100px/2 = 50px。（仅供参考，以iphone6设计稿的尺寸为例）