抛出问题：

UI设计稿给我们的750px以及640是指的什么像素？物理像素还是逻辑像素还是……

物理像素

物理像素简称dp，也称设备像素，设备刚出厂就定下来了，如pc端常见分辨率1920 * 1080，意味着在屏幕水平方向上有1920个像素点，垂直方向上有1080个像素点。

分辨率也就是设备的长占的像素点乘上宽占的像素点。

那么UI设计师通常给的750px到底是物理像素还是css像素呢？

答案是肯定的是物理像素

设备独立像素(density-independent pixel)

「设备独立像素」(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素 )，有时我们也说成是**「逻辑像素」**

在CSS规范中，长度单位可以分为绝对单位和相对单位。px是一个 相对单位 ，相对的是 设备像素（Device Pixels） 。比如iPhone5使用的是Retina视网膜屏幕，用2x2的Device Pixel代表1x1的CSS Pixel，所以设备像素数为640x1136px，而CSS逻辑像素数为320x568px

所以，1个CSS像素在不同设备上可能对应不同的物理像素数，这个比值是设备的属性（Device Pixel Ratio，设备像素比）

设备像素比

Dpr = 物理像素 / 设备独立像素

设备像素比表示1个CSS像素（宽度）等于几个物理像素（宽度）

---

Question

了解完上述物理像素以及设备独立像素等概念之后，下面来附个图考考大家

通过chrome调试移动端开发页面

上面的414 × 896是什么像素呢，我们可以来通过百度搜索证实一下是否正确

答案就很明显了，chrome里面的414 × 896其实是设备独立像素也就是css像素，而828 × 1792是物理像素，能看到是一个二倍关系，也就是dpr=2

设备放大缩小

我们通常用使用command +可以设置页面的放大和缩小 请问下原理是什么呢？

其实就是通过调整dpr 来实现这个放大缩小的目的

解释：

我们再看下dpr的定义：表示1个CSS像素（宽度）等于几个物理像素（宽度），设备独立像素与dpr是成反比关系

现在如果我们现在要进行缩小页面操作，我们要将1个css像素（1px）所占用的物理像素宽度减少，达到缩小的目的，则我们需要去做的事情则是扩大我们的设备独立像素

验证：

当你使用command +放大页面时，可以在我们的控制台打window.devicePixelRatio输出当前的dpr，再结合100%页面的时候的dpr进行比对。