DPR:
物理像素/设备独立像素 这个比值就是DPR
如：iphone6 物理像素是750 设备独立像素是375
那么：750/375 = 2 iphone6的DPR是2
二倍图：
现在，有一张100px x 100px的图片，在DPR = 1.0的设备中，可以完美的显示。
在iphone3G中，此图片背后的发光点有100 x 100个
当我们把它（100px x 100px的图片）放在DPR = 2.0的设备中，它背后对应的发光点有多少个？
答： 在DPR=2的设备中，此图片背后的发光点有200 x 200个。此时，这张图片就会变的模糊。
如何让它不模糊？
答： 如果把这张100px x 100px的图片，再做一张200 x 200的图片，图片的内容是一样。
如果我把200 x 200的图片，放到DPR=2的设备中，此图片背后的发光点有400 x 400个。
如果说把图片手动调整成100 x 100px，相当于，你把图片缩小了，实际上，图片还是200 x 200px。
再说一遍，图片的质量还是200 x 200，只是手动的缩小了成了100 x 100,那此图片背后的发光点有
200 x 200.
在DPR = 1.0设备中，显示一个100 x 100的图片，直接使用原图，此图背后的发光点有100 x 100
在DPR = 2.0设备中，需要使用200 x 200的图片，还需要手动缩小成100 x 100，此时背后的发光点有200 x 200
在DPR = 3.0设备中，需要使用300 x 300的图片，还需要手动缩小成100 x 100，此时背后的发光点有300 x 300
图片有三张：1倍图，如logo.png 二倍图， 如[email protected] 三倍图， 如[email protected]
REM：
px:一个盒子是100px * 100px px指的是逻辑像素
em: 一个汉字的宽度。2em表示两个汉字的宽度
rem:说到rem，通常指适配。
利用媒体查询去设置样式：
@media only screen and (width: 320px){
div{
/* 在iphone5中，正好撑满 */
font-size: 32px;
}
}
em:表示一个汉字的宽度。
1em = 1个font-size。
如：font-size是20px, 1em = 20px 10em = 200px
em的不足，它是相对于父元素的font-size来说的。
由于em需要找父元素，不适配做适配。
rem: r表示root root是根的 rem就不需要父元素，只需要html标签。
1rem = html标签中的font-size的大小。
如：html标签的font-size = 34px;
计算：
1rem = 34px
2rem = 68px
3rem = 102px
1em = 父标签中的font-size的大小。
需要利用媒体查询 + rem适配： 看好好的步骤
1）得到的设计搞是750px
2）通常我会把浏览器的模拟器调整750px
3）严格按照设计搞，以rem为单位，把设计搞还原了来。
4）开始写样式了，需要确定html的font-size，通常我会定为100px。 叫确定rem的基准值。
有一个盒子widht是20px，1rem = 100px，盒子是20px，换算成rem是0.2rem
又有一个盒子widht是55px，换成rem是0.55rem
说白了，量设计搞，量出来的尺寸，除于100就是rem单位。
到此，不要管其它屏，不要管其它屏，在750这个屏中，还原设计搞。
5）把刚才写好的页面，迁移到其它屏上，完成适配。此时就需要借助手媒体查询了。
开始换算：
在750的屏中，html的font-size是100px。
在375的屏中，html的font-size是50px。
在320的屏中，html的font-size是320/750 * 100 = 42.666666666666666666px
在414的屏中，html的font-size是414/750 * 100 = 55.2px
不使用媒体查询，使用JS把750的页面迁移到其它屏：
<script>
(function(w){
let docEle = w.document.documentElement;
let timer = null;
// docEle.clientWidth 一屏的宽度
function refresh(){
let width = docEle.getBoundingClientRect().width; // 一屏的宽度
if(width > 750){
width = 750
}
let fs = width / 7.5
document.querySelector("html").style.fontSize = fs + "px";
}
// refresh();
w.addEventListener("resize",()=>{
// console.log("resize"); 防抖
timer && clearTimeout(timer)
timer = setTimeout(refresh, 400)
})
w.addEventListener("pageshow",()=>{
// console.log("resize"); 防抖
timer && clearTimeout(timer)
timer = setTimeout(refresh, 400)
})
})(window)
</script>