在做魯商圈移動端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;//轉換后
   }