一、设备像素比（device pixel ratio）
在前端开发之前，我们会有一个psd文件，称之为视觉稿。对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点： 首先，选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480，现在更多的是iphone6的375×667)。 对于retina屏幕(如: dpr=2)，为了达到高清效果，视觉稿的画布大小会是基准的2倍，也就是说像素点个数是原来的4倍（对iphone6而言：原先的375×667，就会变成750×1334）
一个物理像素是显示器上最小的物理显示单元，每一个像素都有自己的颜色值和亮度。
同一个设备，它的物理像素是固定的，即一个设备的分辨率是固定的。
逻辑像素是指css样式中使用的逻辑像素，也可以说是设备的宽高
设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到：
设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方向 //js获取方法 window.devicePixelRadio //iphone6 =>2注意点：
（1）在fireFox及ie中不支持window.devicePixelRatio
（2）在同一设备不同浏览器中，window.devicePixelRatio值可能不同，这是由于不同的浏览器中css像素数不同
在javascript中，可以通过window.devicePixelRatio获取到当前设备的dpr。 在css中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同dpr的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。
综合上面几个概念，一起举例说明下,以iphone6为例：设备宽高（即逻辑像素）为：375×667 ，dpr为2，物理像素为 750×1334
//css样式 width:1px; height:1px;相同尺寸下，普通屏幕 VS Retina 屏，css像素所呈现的物理尺寸（大小）是一致的，不同的是一个css像素所对应的物理像素的个数不一致： 普通屏幕：css像素：物理像素 = 1:1 retina屏： css像素：物理像素 = 1:4 即4个物理像素显示一个css像素；
二、移动端适配之rem
适配前提：
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width">适配原理：使用rem单位进行移动端布局适配，原理是针对不同手机屏幕尺寸和dpr动态的改变根节点html的font-size大小
