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

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

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

阿里團隊開源的一個庫。flexible.js，主要是實現(xiàn)在各種不同的移動端界面實現(xiàn)一稿搞定所有的設備兼容自適應問題。

實現(xiàn)方法：

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

;(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標簽來設置縮放比例');
    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下，對于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 {
      // 其他設備下，仍舊使用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';

假設我們的設計稿寬是640的，則html的字體大小則被設為64px.則相當于1rem=64px.(1rem相對于根節(jié)點的字體大小)。

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

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

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

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

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

1a = 7.5px
1rem = 75px

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

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

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

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

字體建議使用px

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

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

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

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

為了能更好的利于開發(fā)，在實際開發(fā)中，我們可以定制一個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);

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: