1。概念设备像素（devicepixel）简称DP设备像素，也称为**物理像素**，是设备能够控制显示的最小单位，我们可以把它看成是显示器上的一个点。我们常说的1920x1080像素分辨率就是使用的设备像素单位。CSS像素（csspixel）CSS像素是**web编程**的一个概念，它是**抽象的**，实际上**不存在**。用于逻辑测量像素的单位。即我们制作网页时使用的css像素单位。DeviceIndependentPixel(DIP)也称为密度无关像素，可以认为是计算机坐标系中的一个点。这个点代表一个可以被程序使用和控制的虚拟像素，可以被相关系统转换为物理像素。Deviceindependentpixel是一个整体的概念，包括csspixel，比如：csspixel，但是在android机器上，csspixel不叫“csspixel”，而是“deviceindependentpixel”。2.关系因为设备无关像素是包括css像素在内的一大类，所以这里只讨论设备像素和设备无关像素的关系。PC端1个device-independentpixel等于1个devicepixel（在100%unscaled的情况下），如果缩放到200%，那么1deviceindependentpixel等于2个devicepixels。移动终端因设备而异。在详细阐述设备像素和独立设备像素的关系之前，我们先了解两个概念，ppi和dprPPI像素密度（pixelperinch）PPI翻译过来就是每英寸有多少像素（这里的像素是指设备像素，也就是物理像素）像素）。说白了，PPI就是**像素密度**像素密度），PPI的值越高，画质越好，看起来越逼真。那么PPI是怎么计算的呢？看公式。计算公式：我们不妨用上面的公式来做数学题，看下图：我们来计算一下iphone6plus的ppi；varppi=sqrt(1920X1920+1080X1080)/5.5;计算出来的ppi是400.528576，实际中可能会不一样，不过没关系。好吧，我们回到上面的问题：两者（设备像素和设备无关像素）是如何转换的？它们是通过设备像素比（dpr，devicepixelratio）来转换的。那么什么是设备像素比呢？DPR（devicepixelratio）设备像素比1.设备像素比定义了设备像素和设备独立像素之间的转换关系（告诉你一个设备像素对应多少个独立设备像素（css像素）），计算公式为：在javascript中，可以通过window.devicePixelRatio获取当前设备的dpr。在css中可以通过-webkit-device-pixel-ratio、webkit-min-device-pixel-ratio和-webkit-max-device-pixel-ratio进行媒体查询，针对不同的dpr设备做一些样式适配（这个仅适用于具有webkit内核的浏览器和webviews）。2.设备像素的大小是固定不变的。可以拉伸或压缩与设备无关的像素。怎么理解呢？看图片。让我们来看一个现实生活中的例子。Iphone5s使用Retina视网膜屏幕。什么是Retina视网膜屏幕？PPI值超过300的屏幕被称为超高密度屏幕，但苹果给它起了一个高贵的名字：Retina视网膜屏。在做手机页面开发的时候，相信大家经常会遇到这样的情况：在不同的手机上查看时，里面的图片、文字或者线条的大小都会不一样，有时候大小相差非常大。原因是刚刚提到的设备像素比在起作用。想一想，如果一个设备光点在普通屏幕上对应一个CSS像素，也就是标准的PPI，页面不会太大也不会太小，都能完美渲染。但在这个高调的时代，标准的PPI已经很少见了。更多适用于Retina设备。不同品牌的手机设备像素比不同。即使是同一品牌的手机也不一样。比如Iphone5s的设备像素比为2，Iphone6s的设备像素比为3。至于Android手机中的设备像素比则更多，如1.3、1.5、2、3等.3.设备像素与独立设备像素的关系（例子）以iphone6为例：设备宽高为375×667，可以理解为设备独立像素（或css像素）。dpr为2，根据上面的计算公式，它的物理像素应该是×2，也就是750×1334。从上图可以看出，对于这样一个css样式：width:2px;高度：2px；在不同的屏幕上（普通屏幕vsretina屏幕），csspixel呈现的大小（物理尺寸）是一致的，不同的1个csspixel对应的物理像素个数是不一致的。在普通屏幕上，1个css像素对应1个物理像素(1:1)。在视网膜屏幕下，1个css像素对应4个物理像素（1:4）。4.设备像素和CSS像素之间的转换是如何产生的？设备像素和CSS像素之间的转换是如何产生的？，这就要说到ppi和dpr了。上面计算的ppi是得到密度边界，得到默认的缩放比例，即设备像素比例。从上图可以看出，ppi在120-160之间的手机属于低密度手机，160-240属于中密度手机，240-320属于高密度手机，320以上的属于超高密度手机（苹果给的）。它有一个高大上的名字——Retina）。得到设备像素比后，就可以知道设备像素与CSS像素的比值。当此比例为1:1时，使用1个设备像素显示1个CSS像素。当比例为2:1时，使用4个设备像素来显示1个CSS像素，当比例为3:1时，使用9（3*3）个设备像素来显示1个CSS像素。
