1px = dpr^2 * dp 这个是不是有问题？

结尾的总结：

1px = dpr^2 * dp
这个是不是有问题？
以下这个等式不成立吧:
320*568 px = 2^2 * 1136*640

1px = dpr ^2 * dp 是平面上的像素换算，但实际开发当中使用更多的是长度上的换算： 1px = dpr * dp。

所以320px = 640dp 注意这时候320px 是长度不是平面，568px同理

这个表达的是在CSS里的1px等于多少个设备上的像素，对于iphone5,他的drp=2，那会放大2倍，所以1个csspx会用1*2的平方即4个设备像素来展示(记住X，Y两个方向都是放大2倍的)

用友iUAP马太航：Html 5 屏幕适配解决方案

　　摘要：开发者在开发HTML5应用时必须考虑所有屏幕尺寸和分辨率类型的应用场景，为移动应用做屏幕尺寸和分辨率的适配工作。

　　随着移动和HTML5的持续火热，移动市场涌现出了大量基于HTML5开发的移动APP。由于移动市场的高速发展，移动设备的快速更新，使得市场上出现了种类繁多具有各种屏幕尺寸和分辨率的移动设备，开发者在开发HTML5应用时就必须考虑所有屏幕尺寸和分辨率类型的应用场景，为移动应用做屏幕尺寸和分辨率的适配工作。

　　想要为移动应用做屏幕适配首先要了解一些概念。物理像素，即屏幕上的最小显示单元;设备独立像素，即由程序使用的虚拟像素(如CSS中的px);设备像素比，设备像素比 = 物理像素 / 设备独立像素，定义了物理像素与设备独立像素间的对应关系，简称dpr(device pixel ratio)。在不同屏幕上，CSS像素呈现的大小(物理尺寸)是一致的，不同的是一个CSS像素对应的物理像素个数是不同的。举例来讲，普通屏幕的每个像素点与CSS中定义的像素点大小相同，但是苹果的retina屏幕一个CSS像素对应4个物理像素。因此，在开发应用时就需要对不同屏幕(高清和非高清)进行区分处理。就一张普通的图片(PNG、JPG、GIF等)来讲，其最小的数据单元称为位图像素。理论上，一个位图像素对应一个物理像素，这样图片才能完美的清晰展示，但是对于高清屏幕(Retina)就会出现位图像素点不够的情况，这样会导致图片模糊。遇到这种情况，通常要准备两张图片，如一张200×300(CSS px)，并提供一张400×600的高清图片，这样位像素点就是原来的4倍，在retina屏幕下正好与其物理像素点一一对应，图片自然就清晰了。当然，具体要加载那种图片是有dpr来判断的，在JavaScript中，可以通过window.devicePixelRatio获取到当前设备的dpr，在css中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同dpr的设备，做一些样式适配。与图片问题类似，高清屏幕还存在一种“失真”的问题，即border:1px问题。对于border:1px在所有屏幕中的物理大小其实是相同的(下图灰色区)，但这怎能体现出高清呢?对于retina屏幕来说，一个 CSS像素由4个物理像素组成，因此其最细的线条并不是1px，而是0.5px，如下图红色框。而一般情况下设计师想要的retina下border: 1px，其实就是1物理像素宽，这种更细粒度的划分也带来的视觉上的高清。

　　当然，除了高清上的适配，还存在着屏幕大小上的适配，即页面布局问题。目前解决该问题最好用的方案是使用相对单位(rem)，主要工作就是针对不同手机屏幕尺寸和dpr动态的改变根节点html的font-size大小(基准值)。rem=document.documentElement.clientWidth * dpr / 10，乘以dpr是因为页面有可能为了实现1px border缩放1/dpr倍(如果没有，dpr=1)，除以10是为了取整，方便计算。可以通过JavaScript来实现，使用公式计算出基准值rem，然后写入样式，代码如下：

　　var dpr, rem, scale;

　　var docEl = document.documentElement;

　　var fontEl = document.createElement('style');

　　var metaEl = document.querySelector('meta[name="viewport"]');

　　scale = 1 / dpr;

　　dpr = win.devicePixelRatio || 1;

　　rem = docEl.clientWidth * dpr / 10;

　　// 设置viewport，进行缩放，达到高清效果

　　metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');

　　// 设置data-dpr属性，留作的css hack之用

　　docEl.setAttribute('data-dpr', dpr);

　　// 动态写入样式

　　docEl.firstElementChild.appendChild(fontEl);

　　fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';

　　// 给js调用的，某一dpr下rem和px之间的转换函数

　　window.rem2px = function(v) {

　　v = parseFloat(v);

　　return v * rem;

　　};

　　window.px2rem: function(v) {

　　v = parseFloat(v);