flexible.js实现移动端适配

在做鲁商圈移动端APP项目时用到了flexible进行移动端适配。

一、前景提要

      1.css单位：px ，rem，em，pt，vw，%

      2.

      3.

        (1)物理像素(physical pixel)

            一个物理像素是显示器(手机屏幕)上最小的物理显示单元（像素颗粒），在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。 如：iPhone6上就有750*1334个物理像素颗粒。

        (2)dip设备独立像素(density-independent pixel)

            设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，有时我们也说成是逻辑像素。

        (3)dpr设备像素比(device pixel ratio )            

            设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系。

        (4)公式：设备像素比 = 物理像素 / 逻辑像素(px)  Ps:在某一方向上，x方向或者y方向

二、flexible的使用

       flexible.js 的用法非常的简单，在页面的中引入flexible.js文件即可(先加载执行)

       1.第一种方法是将文件下载到你的项目中，然后通过相对路径添加：

       2.直接加载阿里CDN的文件：

       3.js中重要的地方（根据设计图更改尺寸大小）：

          例如设计稿为750px

   function refreshRem() {
     var width = docEl.getBoundingClientRect().width;
     if (width / dpr > 750) 
     {
        width = 750 * dpr
      }
     var rem = 100 * (width / 750)
     docEl.style.fontSize = rem + 'px';
     flexible.rem = win.rem = rem;
   }
   
   css中rem单位写法：
   .div{
      width:750px;//转换前
      width:7.5rem;//转换后
   }