设备独立像素 ：设备独立像素也称为密度无关像素，这个概念可能有点抽象，大家可以这么来理解 iPhone6的尺寸是375X667 这就可以理解为设备独立像素
设备像素比（dpr） :设备像素比简称为dpr，其定义了物理像素和设备独立像素的对应关系。
css像素 ：CSS像素是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。一般情况之下，CSS像素称为与设备无关的像素(device-independent pixel)，简称DIPs。在不同的屏幕上，CSS像素所呈现的物理尺寸是一致的，而不同的是CSS像素所对应的物理像素具数是不一致的。在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素。
设备像素 （device pixels）也叫做 设备物理像素 是一个具体可测量的物理单位。
CSS 像素是与设备无关的像素，这一类像素也叫做 独立设备像素 （Device-independent pixel），它们是应用程序的抽象单位。当应用程序运行时，底层图形系统会按照 一定的比例 （设备物理像素和设备独立像素比）将应用程序的抽象像素转换为适用于设备的物理像素。
设备物理像素 和 设备独立像素 的比例， 设备物理像素， 设备独立像素。
将 CSS 布局中的 px 是相对于物理像素的单位，在大多数浏览器中，通过 window.devicePixelRatio 可以得到物理像素与它的比率。比如在 iPhone6 上分辨率750x1334，它的 window.devicePixelRatio=2 所以它屏幕宽度为375px，共有750个物理像素，即1px代表两个物理像素。
下面是 window.devicePixelRatio 浏览器的兼容性。
浏览器中的 **viewport **和 <html>区域相同，可以看作是 <html>上层的包含块。在大多数移动设备中，浏览器是全屏的，所以 viewport 是整个屏幕的大小。
视口中经常需要区分 布局视口（layout viewport），视觉视口（visual viewport）和理想视口（ideal viewport）
布局视口 可以看作是CSS布局时的画布， 视觉视口 是当前显示的页面区域， 理想视口 是页面在设备最佳的呈现。
理想的呈现方式是终极目标，可以使用户体验大大提升，特别是在非PC设备上，理想的状态意味着：
如果 布局视口宽度 ≠ 视觉视口宽度 ， 出现的情况就是内容过宽，用户可能就需要缩放来查看内容，缩小后，看起来费劲，放大后需要左右滑动查看。
移动浏览器和桌面浏览器最大的区别是屏幕宽度小很多，对于很多针对PC设计的网页会因为宽度变窄而显示错乱。
因为移动设备浏览器认为自己必须能让所有的网站都正常显示，这包括了很多PC端网站，所以各移动浏览器厂商统一将设备默认 布局视口 设置为 980px。
比如在宽 375px 的 iphone6 上显示一个宽为 980px 的页面，大多数浏览器为了让页面显示全而缩小页面。
我们可以使用 meta viewport 让浏览器 布局视区 等于屏幕宽度也就是375px，这样显示出来就是理想效果。
下面这个 meta 是我们在开发移动设备的网站最常用的。
该 meta 标签的作用是让当前 布局视口 的宽度等于设备的宽度，同时不允许用户手动缩放。
meta viewport 标签首先是由苹果公司在其 safari 浏览器中引入的，目的就是解决移动设备的 viewport 问题。后来安卓以及各大浏览器厂商也都纷纷效仿，引入对 meta viewport 的支持，事实也证明这个东西还是非常有用的。
下面是一些设备的分辨率和视口大小：
设备像素比 （Device Pixel Ratio, DPR ）：其实指的是 window.devicePixelRatio , 被所有WebKit浏览器以及Opera所支持，一个设备的物理像素与逻辑像素之比。
当像素比为1:1时，使用1个物理像素显示1个CSS像素；当像素比为2:1时，使用4个物理像素显示1个CSS像素；当像素比为3:1时，使用9（3 3）个设备像素显示1个CSS像素*。
像素为什么会有“物理”和“逻辑”之分，它们之间什么区别？
其实在很久以前，的确是没区别的，CSS里写个 1 px ，屏幕就给你渲染成1个实际的像素点， DPR=1 ，多么简单自然~
后来苹果公司为其产品mac、iPhone以及iPad的屏幕配置了Retina高清屏，也就是说这种屏幕拥有的物理像素点数比非高清屏多4倍甚至更多。如果还按照DPR=1进行展示，那么同一张图片在高清屏上面显示的区域面积会是非高清屏的1/4，这样的话由于图片在屏幕上的展示面积大大缩小，也会导致出现“看不清”的问题。
举个例子，iPhone 6的物理像素上面已经说了，是 750 * 1334 ，那它的逻辑像素呢？我们只需在 iPhone 6 的Safari里打印一下 screen.width 和 screen.height 就知道了，结果是 375 * 667 ，这就是它的逻辑像素，据此很容易计算出 DRP为2 。当然，我们还可以直接通过 window.devicePixelRatio 这个值来获取 DRP ，打印结果是 2 ，符合我们的预期。
举例：
设备宽高为 375×667 ，可以理解为设备独立像素(或css像素)， dpr为2 ，根据上面的计算公式，其物理像素就应该 ×2 ，为 750×1334 。
上图中可以看出，对于这样的css样式：
相同尺寸下，普通屏幕 VS Retina 屏，css像素所呈现的物理尺寸（大小）是一致的，不同的是一个css像素所对应的物理像素的个数不一致：
即4个物理像素显示一个css像素 ；
从以上现象得出的结论是 ：
UI设计师按照手机物理像素出设计稿，切图时根据其设备像素比来换算设备独立像素（CSS像素），比如视网膜手机iPhone6，物理像素 750px×1334px ，由于其设备像素比为2，CSS切图时需要将设计稿的所有尺寸除以2，才是正确CSS像素值。
