全面解析：lib-flexible 的使用与原理

一、lib-flexible 简介

lib-flexible 是淘宝团队出品的一个移动端自适应解决方案，通过动态计算 viewport 设置 font-size 实现不同屏幕宽度下的 UI 自适应缩放。它可以让我们快速实现一个移动端的自适应布局，尤其是在处理不同屏幕像素密度比例时，非常实用。下面我们来具体了解它的使用和原理。

二、lib-flexible 的使用

使用 lib-flexible 来实现移动端的自适应布局非常简单。下面是它的使用方法：

// 引入 lib-flexible.js
<script src="http://g.alicdn.com/fdilab/lib-flexible/0.3.4/lib-flexible.js"></script>

// 在 head 标签中添加以下 meta 标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

其中，meta 标签中的 viewport 是用来设置移动端网页的显示区域的，内容可以自行修改。使用 lib-flexible 后，我们可以在样式文件中直接以 rem 作为单位编写样式，而无需手动计算不同屏幕下元素的具体尺寸。

三、lib-flexible 的原理

lib-flexible 的原理非常简单，主要是通过 JS 计算来完成的。它的基本思想是将页面宽度分成若干份，每份的宽度为 dpr（设备像素比） 个 css 像素，以 iPhone6 的屏幕为例，其 dpr 为 2，分辨率为 750px，因此我们可以将其分成 750/2=375份。那么每一份的宽度就为 2 个 css 像素，这样我们就可以通过 JS 动态计算 font-size，以使不同移动设备都能够正确适配。

下面是 lib-flexible 的源码，这也是我们可以看到具体实现方式的地方：

;(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('将根据已有的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的屏，分别给出dpr为2和3的方案
      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;
    // 这里是判断移动端设备是否超过 540 像素，如果超过，则以 540 为界限，不再缩放 
    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 = {}));

以上代码主要是实现了动态计算 font-size 的方法，通过监听屏幕尺寸变化，每次重新计算 font-size 完成适配。同时，在设置 viewport 的时候，也做了一定的限制条件，防止屏幕过大或过小的情况下导致的适配失效问题。至此，我们可以看出 lib-flexible 的实现非常简单高效。

四、总结

lib-flexible 可以说是一款非常优秀的移动端自适应布局解决方案，它的高效性、易用性以及稳定性得到了广泛的认可。同时，在移动端自适应布局领域，尤其是在处理不同屏幕像素密度比例时，lib-flexible 也是一个非常不错的选择。不管是从性能方面还是从使用体验上来说，都是一款非常优秀的解决方案。