为什么需要适配
很久以前的手机的DPR都是1，这时候不需要做DPR适配，直接按照设计稿将页面画出来即可。但是自从技术的发展屏幕的升级出现了DPR为2为3甚至更高并且屏幕的尺寸也变得很多样化，这个时候如果不做适配会出一些问题，如图片模糊，不能实现真正的1px边框，同一个布局在不同尺寸下的表现不一致，如在375屏幕下是100px在414的屏幕下还是100px，这就有问题了，应该等比放大才对。
所以我们需要根据不同的屏幕尺寸和DPR来改变布局中的尺寸来动态调整布局，让布局在当前尺寸和DPR的屏幕上更好的展示。
一些基本概念
一个屏幕的DPR是根据屏幕的物理像素除以屏幕的设备独立像素（也叫密度无关像素）得来的（DPR = 物理像素 / 设备独立像素）。iphone6宽度的设备独立像素是375，宽度的物理像素是750，那么就意味着DPR是2。这就意味着需要四个物理像素来描绘一个设备独立像素，就像一个田（请忽略边框）的形状。
设备独立像素又叫做密度无关像素，可以认为是系统中一个点，这个点可以是可以由程序使用的虚拟像素（如CSS的px），然后系统会将这个像素转换为物理像素，在屏幕的DPR为2的设备上CSS的1px就会转为4个物理像素。
再多说一个屏幕密度（PPI），通常是计算每英寸有多少个像素（设备独立像素），计算公式是：屏幕斜对角的像素数除以屏幕的英寸得出PPI的值。
对一开始适配问题做出一定程度的解释
根据上面DPR解释可以知道在DPR为2的屏幕上会使用四个设备像素来描述一个CSS像素。在这种情况下一张100*100的图片在页面上的尺寸也是100*100那么其实是200*200个物理像素来描绘这张图片，很明显图片的像素是不够的，这时候系统就会让剩下的像素就近取色，这样就造成了图片的模糊，想要图片不模糊要么提供一个200*200的图片，要么将页面上100*100的容器缩小到50*50。
在DPR为2的屏幕上高度的1px其实是由2个物理像素描绘的，所以该屏幕可以描绘的最小像素应该是0.5px，所以这个1px应该是0.5px才对。
怎么做适配
既然提出了问题那么就需要解决，解决方案主要来自手淘的flexibleJS，其原理就是适配不同屏幕尺寸主要用到了rem，而适配不同的DPR主要用到了<meta name="viewport" content="initial-scale=1/dpr"/>
不同屏幕尺寸
在CSS中单位使用rem，那么只要修改html的font-size那么这个页面的尺寸都会随之等比例改变。例如：
// 750尺寸页面
html{
font-size: 75px; // 通过js获取宽度750/10得到
}
div{
width: 1rem; // 相当于75px
height: 1rem;
}
// 网页放到了375屏幕下面
html{
font-size: 37.5px; // 修改html的字号为37.5px，那么div的width和height自动会缩小一半
}上面完成了不同屏幕尺寸的适配问题，不会让元素在不同尺寸屏幕下总是显示同样的像素。
不同DPR
在不同DPR的屏幕下可以通过设置name为view的mete标签的缩放比例完成适配。这块涉及到视口的许多知识（我也搞不清楚具体是怎么缩放的，遵循什么样的一个规则，有知道的请赐教），这边只能简单说一下自己的理解。
视口分为两个一个和浏览器窗口一样的虚拟视口还有一个就是CSS用于布局的布局视口。由于手机屏幕小很多网站都是为电脑设计的尺寸相对较大，只用虚拟视口肯定是放不下的，所以布局视口一般会比虚拟视口大，就像向透过一个窗口去看一幅很大的画一样，这个窗口离得近看的东西就少看的清晰，离得远看的东西就多但是太小了看不清晰。但是网页加载进来默认行为就是缩放（缩放的到底是什么？）到一定比例尽量让整个网页在虚拟视口中可以看完整。
虽然不知道initial-scale改变的是什么，遵循了什么样的规则，但是我可以描述下观察到的规律。如下设置：
iphone6 dpr: 2 设备独立像素: 375 document.documentElement.width: 375
<meta name="viewport" content="initial-scale=0.5" />进行如上设置之后
document.documentElement.width: 750px，变成了750px，也就是说同样物理尺寸的屏幕中塞进去了原来像素（375 * 667）的四倍（2宽2高，750 1334）。这样就可以一个物理像素对应一个CSS像素达到了高清的目的。
在引用上文提到的手淘的flexibleJS之后会自动设置html的font-size为75px，这时候的主要问题就是怎么将设计稿（一般都是750*1334）中的各个px值转换为rem。可以自己手动算（比较麻烦），可以使用编辑器插件，使用postcss插件等详情见使用Flexible实现手淘H5页面的终端适配