Flexible.js可伸縮布局實(shí)現(xiàn)方法詳解

更新時(shí)間：2020年11月13日 10:57:56 作者：Leone-

這篇文章主要介紹了Flexible.js可伸縮布局實(shí)現(xiàn)方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

阿里團(tuán)隊(duì)開源的一個(gè)庫。flexible.js，主要是實(shí)現(xiàn)在各種不同的移動(dòng)端界面實(shí)現(xiàn)一稿搞定所有的設(shè)備兼容自適應(yīng)問題。

實(shí)現(xiàn)方法：

通過JS來調(diào)整html的字體大小，而在頁面中的制作稿則統(tǒng)一使用rem這個(gè)單位來制作。關(guān)鍵代碼如下：

;(function(win, lib) {
  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 = {});
   
  if (metaEl) {
    console.warn('將根據(jù)已有的meta標(biāo)簽來設(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));  
      }
    }
  }
 
  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);
  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);
    }
  }
 
  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);
 
  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);
  }
   
 
  refreshRem();
 
  flexible.dpr = win.dpr = dpr;
  flexible.refreshRem = refreshRem;
  flexible.rem2px = function(d) {
    var val = parseFloat(d) * this.rem;
    if (typeof d === 'string' && d.match(/rem$/)) {
      val += 'px';
    }
    return val;
  }
  flexible.px2rem = function(d) {
    var val = parseFloat(d) / this.rem;
    if (typeof d === 'string' && d.match(/px$/)) {
      val += 'rem';
    }
    return val;
  }
 
})(window, window['lib'] || (window['lib'] = {}));

從上面的代碼，主要是改變了dpx和document的font-size大小。大小為docEl.getBoundingClientRect().width / 10 + 'px';

假設(shè)我們的設(shè)計(jì)稿寬是640的，則html的字體大小則被設(shè)為64px.則相當(dāng)于1rem=64px.(1rem相對(duì)于根節(jié)點(diǎn)的字體大小)。

假如一個(gè)元素的寬是160px,在平時(shí)，我們可以采用百分比可以做到自適應(yīng)，假如使用響應(yīng)式的話，可能需要設(shè)置多個(gè)，比如在320px，輸出80px，而在640px輸出160px等。而采用以上的方法，則只需要輸出2.5rem就能實(shí)現(xiàn)統(tǒng)一，如下表格：

設(shè)備寬度	320px	360px	414px	640px
Html字體大小	32px	36px	41.4px	64px
實(shí)際輸出	1rem	1rem	1rem	1rem
設(shè)計(jì)稿縮放大小	80px	90px	103.5px	160px
實(shí)際輸出	2.5rem	2.5rem	2.5rem	2.5rem

以上的2.5rem是怎么得出的呢？

160/64（1rem的基數(shù)為64px）=2.5rem;按照官方的說法（750px舉例）

Flexible會(huì)將視覺稿分成100份（主要為了以后能更好的兼容vh和vw），而每一份被稱為一個(gè)單位a。同時(shí)1rem單位被認(rèn)定為10a。針對(duì)我們這份視覺稿可以計(jì)算出：

1a = 7.5px
1rem = 75px

那么我們這個(gè)示例的稿子就分成了10a，也就是整個(gè)寬度為10rem，<html>對(duì)應(yīng)的font-size為75px：

這樣一來，對(duì)于視覺稿上的元素尺寸換算，只需要原始的px值除以rem基準(zhǔn)值即可。例如此例視覺稿中的圖片，其尺寸是176px * 176px,轉(zhuǎn)換成為2.346667rem * 2.346667rem。

另外在使用這個(gè)來處理自適應(yīng)的另一個(gè)坑就是css sprite，作者的建議是使用svg，或者icon font.或者base64等其他方案。

另外就是在dpr=2時(shí)，小圖片可能會(huì)出現(xiàn)模糊，建議以最大的圖片來切圖。

字體建議使用px

在作者的觀點(diǎn)中，是建議描述性的字體使用px，如果有slogan之類大于48px的，可以使用rem，由于使用rem在iPhone5和iPhone6中字體不同，可能出現(xiàn)13px和15px,點(diǎn)陣字體。

顯然，我們?cè)趇Phone3G和iPhone4的Retina屏下面，希望看到的文本字號(hào)是相同的。也就是說，我們不希望文本在Retina屏幕下變小，另外，我們希望在大屏手機(jī)上看到更多文本，以及，現(xiàn)在絕大多數(shù)的字體文件都自帶一些點(diǎn)陣尺寸，通常是16px和24px，所以我們不希望出現(xiàn)13px和15px這樣的奇葩尺寸。

如此一來，就決定了在制作H5的頁面中，rem并不適合用到段落文本上。所以在Flexible整個(gè)適配方案中，考慮文本還是使用px作為單位。只不過使用[data-dpr]屬性來區(qū)分不同dpr下的文本字號(hào)大小。

div {
  width: 1rem; 
  height: 0.4rem;
  font-size: 12px; // 默認(rèn)寫上dpr為1的fontSize
}
[data-dpr="2"] div {
  font-size: 24px;
}
[data-dpr="3"] div {
  font-size: 36px;
}

為了能更好的利于開發(fā)，在實(shí)際開發(fā)中，我們可以定制一個(gè)font-dpr()這樣的Sass混合宏：

@mixin font-dpr($font-size){
  font-size: $font-size;

  [data-dpr="2"] & {
    font-size: $font-size * 2;
  }

  [data-dpr="3"] & {
    font-size: $font-size * 3;
  }
}

有了這樣的混合宏之后，在開發(fā)中可以直接這樣使用：

@include font-dpr(16px);

當(dāng)然這只是針對(duì)于描述性的文本，比如說段落文本。但有的時(shí)候文本的字號(hào)也需要分場(chǎng)景的，比如在項(xiàng)目中有一個(gè)slogan,業(yè)務(wù)方希望這個(gè)slogan能根據(jù)不同的終端適配。針對(duì)這樣的場(chǎng)景，完全可以使用rem給slogan做計(jì)量單位。

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

您可能感興趣的文章: