手淘框架是一個(gè)用來(lái)適配移動(dòng)端的js框架，下面我們來(lái)講解一下如何使用手淘的這套框架。

基本概念

1、視窗viewport

可能寫過(guò)移動(dòng)端的朋友就知道viewport是什么意思。

如果你不知道的話,可以簡(jiǎn)單理解成：瀏覽器的可視區(qū)窗口?？赡茉赑C端,viewport就是瀏覽器窗口的寬度高度。但在移動(dòng)端設(shè)備上卻就有點(diǎn)復(fù)雜,具體的詳細(xì)介紹我就不介紹啦!可以自行百度...

2、物理像素

物理像素又被稱為設(shè)備像素,他是顯示設(shè)備中一個(gè)最微小的物理部件。每個(gè)像素可以根據(jù)操作系統(tǒng)設(shè)置自己的顏色和亮度。正是這些設(shè)備像素的微小距離欺騙了我們?nèi)庋劭吹降膱D像效果。

3、設(shè)備獨(dú)立像素

設(shè)備獨(dú)立像素也稱為密度無(wú)關(guān)像素,可以認(rèn)為是計(jì)算機(jī)坐標(biāo)系統(tǒng)中的一個(gè)點(diǎn),這個(gè)點(diǎn)代表一個(gè)可以由程序使用的虛擬像素(比如說(shuō)CSS像素),然后由相關(guān)系統(tǒng)轉(zhuǎn)換為物理像素。

4、CSS像素

CSS像素是一個(gè)抽像的單位,主要使用在瀏覽器上,用來(lái)精確度量Web頁(yè)面上的內(nèi)容。一般情況之下,CSS像素稱為與設(shè)備無(wú)關(guān)的像素(device-independent pixel),簡(jiǎn)稱DIPs。

5、屏幕密度

屏幕密度是指一個(gè)設(shè)備表面上存在的像素?cái)?shù)量,它通常以每英寸有多少像素來(lái)計(jì)算(PPI)。

6、設(shè)備像素比

設(shè)備像素比簡(jiǎn)稱為dpr,其定義了物理像素和設(shè)備獨(dú)立像素的對(duì)應(yīng)關(guān)系。它的值可以按下面的公式計(jì)算得到:

設(shè)備像素比 = 物理像素 / 設(shè)備獨(dú)立像素

眾所周知,iPhone6的設(shè)備寬度和高度為375pt * 667pt,可以理解為設(shè)備的獨(dú)立像素;而其dpr為2,根據(jù)上面公式,我們可以很輕松得知其物理像素為750pt * 1334pt。

其實(shí)手淘框架的核心原理就是根據(jù)不同的width給網(wǎng)頁(yè)中html跟節(jié)點(diǎn)設(shè)置不同的font-size，然后所有的距離大小都用rem來(lái)代替，這樣就實(shí)現(xiàn)了不同大小的屏幕都適應(yīng)相同的樣式了，首先我們來(lái)說(shuō)一下常用的移動(dòng)設(shè)備。

iphone6:    375px*667px  實(shí)際像素：750px*1334px

iphone5:   320px*568px   實(shí)際像素：640px*1136px

iphone4:   320px*480px   實(shí)際像素：640px*960px

nexus5X(安卓)： 411px *731px 實(shí)際像素：411px＊731px

以上數(shù)據(jù)都來(lái)自于chrome瀏覽器－ －?。。?/p>

其實(shí)我們的iphone手機(jī)都是視網(wǎng)膜屏幕，所以我們的實(shí)際像素因該是無(wú)力像素＊視網(wǎng)膜屏的倍數(shù)。

然而我們?cè)趯?shí)際的開(kāi)發(fā)中ui給出的圖一般都是750X1334的，其實(shí)iphone6的像素和ui設(shè)計(jì)的像素是一樣大小的，但是我們的開(kāi)發(fā)如果都是按照6的px來(lái)設(shè)計(jì)，那么我們的其它比6小尺寸屏幕的所有設(shè)備都會(huì)面臨width不夠的問(wèn)題。flexible就完美的解決了這個(gè)問(wèn)題。

應(yīng)用中我們只要設(shè)置好他的公共比的像素就ok了，比如說(shuō)如果ui圖的像素是750，那我們需要的就是750/10，我們需要的就是75，我們所有的width的固定px就都可以變換成用rem像素代替實(shí)現(xiàn)樣式統(tǒng)一例如我們width需要200px那么我們就可以這樣寫：

width＝200rem/75；從而實(shí)現(xiàn)樣式的兼容（特別注意：因?yàn)閏ss不支持樣式的計(jì)算，我們需要用less活著sass類似的css編譯執(zhí)行就可以得到最終的rem的值了）

另外，我們根據(jù)不同dpr可以設(shè)置一些不同的樣式來(lái)實(shí)現(xiàn)視網(wǎng)膜屏幕的高清屏幕！

[data-dpr="1"] .selector {
 width: 10px;
 height: 32px;
 font-size: 14px;
}
[data-dpr="2"] .selector {
 width: 20px;
 height: 64px;
 font-size: 28px;
}

我們根據(jù)不同的自定義屬性data-dpr來(lái)設(shè)置不同的width和height 從而達(dá)到不同dpr屏幕具有不同的屬性?。ㄟ@個(gè)位置一般用來(lái)處理圖片。。）

下面我們來(lái)講解一下flexible的源代碼：

;(function(win, lib) {

})(window, window['lib'] || (window['lib'] = {}));

首先這個(gè)最外層結(jié)構(gòu)是最基本的封裝類庫(kù)的方法：函數(shù)立即調(diào)用，這樣可以防止封裝方法污染全局變量，jquery的源碼也是一樣的道理！

  var doc = win.document;
  var docEl = doc.documentElement;
  var metaEl = doc.querySelector('meta[name="viewport"]');
  var flexibleEl = doc.querySelector('meta[name="flexible"]');
  var dpr = 0;
  var scale = 0;
  var tid;
  var flexible = lib.flexible || (lib.flexible = {});

doc取文檔的document對(duì)象

docEl取到了我們html為根的整個(gè)dom樹(shù)，后期我們需要向html插入dpr和font-size就是用這個(gè)屬性

metaEl取meta標(biāo)簽里面name＝viewport的元素，沒(méi)有返回空，為了判斷是否有自己設(shè)置的meta值來(lái)做一些邏輯

flexibleEl取meta標(biāo)簽里面name＝flexible的元素，沒(méi)有返回空，為了判斷用戶是否自己手動(dòng)的設(shè)置了一些meta值

dpr表示的是取你手機(jī)屏幕的dpr值

scale表示取你meta里面的scale，會(huì)根據(jù)不同的scale設(shè)置dpr

我們需要了解的大概就是上面的這些需要用到的屬性！

   if (metaEl) {
    console.warn('將根據(jù)已有的meta標(biāo)簽來(lái)設(shè)置縮放比例');
    var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
    if (match) {
      scale = parseFloat(match[1]);
      dpr = parseInt(1 / scale);
    }
  } else if (flexibleEl) {
    var content = flexibleEl.getAttribute('content');
    if (content) {
      var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
      var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
      if (initialDpr) {
        dpr = parseFloat(initialDpr[1]);
        scale = parseFloat((1 / dpr).toFixed(2));  
      }
      if (maximumDpr) {
        dpr = parseFloat(maximumDpr[1]);
        scale = parseFloat((1 / dpr).toFixed(2));  
      }
    }
  }

這段代碼是判斷你的meta標(biāo)簽里面是不是設(shè)置了name=viewport屬性，如果你設(shè)置了viewport并且設(shè)置了initial-scale（初始屏幕的大?。┪覀儗⑷〉竭@個(gè)值作為dpr(做了邏輯運(yùn)算，如果你的頁(yè)面初始的放大為二，那么我們的dpr會(huì)設(shè)置成0)

同理我們?nèi)绻麆?dòng)態(tài)設(shè)置了meta我們直接就取出來(lái)然后設(shè)置dpr和scale

  if (!dpr && !scale) {
    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
    var devicePixelRatio = win.devicePixelRatio;
    if (isIPhone) {
      // iOS下，對(duì)于2和3的屏，用2倍的方案，其余的用1倍方案
      if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {        
        dpr = 3;
      } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
        dpr = 2;
      } else {
        dpr = 1;
      }
    } else {
      // 其他設(shè)備下，仍舊使用1倍的方案
      dpr = 1;
    }
    scale = 1 / dpr;
  }

  docEl.setAttribute('data-dpr', dpr);

之后如果我們動(dòng)態(tài)設(shè)置了scale或者設(shè)置了meta標(biāo)簽里面的name＝flexible的inital-scale，那么我們就根據(jù)自己設(shè)置的dpr在判斷iphone手機(jī)的retina屏幕的dpr比值判斷不同型號(hào)的倍數(shù)，最后我們?cè)趆tml上設(shè)置了data-dpr自定義屬性。

  if (!metaEl) {
    metaEl = doc.createElement('meta');
    metaEl.setAttribute('name', 'viewport');
    metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
    if (docEl.firstElementChild) {
      docEl.firstElementChild.appendChild(metaEl);
    } else {
      var wrap = doc.createElement('div');
      wrap.appendChild(metaEl);
      doc.write(wrap.innerHTML);
    }
  }

之后當(dāng)我們之前沒(méi)有設(shè)置metaEl標(biāo)簽的話，那么需要我們手動(dòng)的去創(chuàng)建meta標(biāo)簽，實(shí)現(xiàn)移動(dòng)端的適配

   function refreshRem(){
    var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 540) {
      width = 540 * dpr;
    }
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
  }

  win.addEventListener('resize', function() {
    clearTimeout(tid);
    tid = setTimeout(refreshRem, 300);
  }, false);
  win.addEventListener('pageshow', function(e) {
    if (e.persisted) {
      clearTimeout(tid);
      tid = setTimeout(refreshRem, 300);
    }
  }, false);

這段代碼的目的就是監(jiān)聽(tīng)window里面的resize和pageshow方法來(lái)實(shí)現(xiàn)css樣式的重繪。

函數(shù)里面就是實(shí)現(xiàn)取到當(dāng)前設(shè)備的width之后根據(jù)width計(jì)算出rem的具體值，rem代表html的font-size，這里的rem代表的是一個(gè)自定義的rem，而不是rem屬性！

  if (doc.readyState === 'complete') {
    doc.body.style.fontSize = 12 * dpr + 'px';
  } else {
    doc.addEventListener('DOMContentLoaded', function(e) {
      doc.body.style.fontSize = 12 * dpr + 'px';
    }, false);
  }

之后我們判斷document對(duì)象是否處于complete狀態(tài)，如果完成狀態(tài)我們給body一個(gè)font-size＝12*dpr的值，否則我們判斷dom加載方法來(lái)實(shí)現(xiàn)body中的font-size的設(shè)置。這個(gè)設(shè)置是為了頁(yè)面中字體的大小，而html中的font-size是為了設(shè)置頁(yè)面的height，width等屬性。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論