在做魯商圈移動端APP項目時用到了flexible進(jìn)行移動端適配。

一、前景提要

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

      2.

      3.

        (1)物理像素(physical pixel)

            一個物理像素是顯示器(手機(jī)屏幕)上最小的物理顯示單元（像素顆粒），在操作系統(tǒng)的調(diào)度下，每一個設(shè)備像素都有自己的顏色值和亮度值。 如：iPhone6上就有750*1334個物理像素顆粒。

        (2)dip設(shè)備獨(dú)立像素(density-independent pixel)

            設(shè)備獨(dú)立像素(也叫密度無關(guān)像素)，可以認(rèn)為是計算機(jī)坐標(biāo)系統(tǒng)中得一個點(diǎn)，這個點(diǎn)代表一個可以由程序使用的虛擬像素(比如: css像素)，有時我們也說成是邏輯像素。

        (3)dpr設(shè)備像素比(device pixel ratio )            

            設(shè)備像素比(簡稱dpr)定義了物理像素和設(shè)備獨(dú)立像素的對應(yīng)關(guān)系。

        (4)公式：設(shè)備像素比 = 物理像素 / 邏輯像素(px)  Ps:在某一方向上，x方向或者y方向

二、flexible的使用

       flexible.js 的用法非常的簡單，在頁面的中引入flexible.js文件即可(先加載執(zhí)行)

       1.第一種方法是將文件下載到你的項目中，然后通過相對路徑添加：

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

       3.js中重要的地方（根據(jù)設(shè)計圖更改尺寸大小）：

          例如設(shè)計稿為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;//轉(zhuǎn)換前
      width:7.5rem;//轉(zhuǎn)換后
   }