移动端适配方案

1. 基础知识
   1. 物理像素
      1. 屏幕的分辨率
      2. 设备能控制显示的最小单位，可以把物理像素看成对应的像素点
   2. 设备独立像素 & css像素
      1. 设备独立像素（也叫密度无关像素），可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用并控制的虚拟像素（比如：CSS 像素,只是在android机中CSS 像素就不叫”CSS 像素”了而是叫”设备独立像素”)，然后由相关系统转换为物理像素。
   3. DPR、DPI、PPI
      1. DPR: 设备像素比，物理像素/设备独立像素 = dpr， 一般以Iphon6的dpr为准 dpr = 2
      2. PPI: 一英寸显示屏上的像素点个数
      3. DPI：最早指的是打印机在单位面积上打印的墨点数，墨点越多越清晰
         
         
   4. 视口
      1. 布局视口：在浏览器窗口css的布局区域，布局视口的宽度限制css布局的宽。为了能在移动设备上正常显示那些为pc端浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或其他值，一般都比移动端浏览器可视区域大很多，所以就会出现浏览器出现横向滚动条的情况。
         
      2. 视觉视口：用户通过屏幕看到的页面区域，通过缩放查看显示内容的区域，在移动端缩放不会改变布局视口的宽度，当缩小的时候，屏幕覆盖的css像素变多，视觉视口变大，当放大的时候，屏幕覆盖的css像素变少，视觉视口变小。
         
      3. 理想视口：一般来讲，这个视口其实不是真是存在的，它对设备来说是一个最理想布局视口尺寸，在用户不进行手动缩放的情况下，可以将页面理想地展示。那么所谓的理想宽度就是浏览器（屏幕）的宽度了。
   5. 扩展内容
      1. 视网膜屏幕是分辨率超过人眼识别极限的高分辨率屏幕，由苹果公司在2010年在iPhone 4发布会上首次推出营销术语。
      2. Iphone的dpr = 2; 人类肉眼分辨的极限
      3. 问题： Iphone6的dpr为多少？Iphone6Plus比Iphone6显示图像清晰吗？
2. 适配方案
   1. viewport适配方案
   2. rem适配方案
   3. 小程序适配方案
      1. Iphon6： 1rpx = 1物理像素 = 0.5px
      2. 微信官方提供的换算方式：
         1. 1.以iPhone6的物理像素个数为标准: 750;
         2. 2.1rpx = 目标设备宽度 / 750 * px;
         3. 3.注意此时底层已经做了viewport适配的处理，即实现了理想视口