rem-flexible/dist/flexible.umd.js

Build flexible page on mobile platform

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.flexible = factory());
})(this, (function () { 'use strict';

  /**
   * 可伸缩布局方案
   *
   * ```ts
   * import flexible from 'rem-flexible'
   * // 在DOMContentLoaded事件触发前调用
   * const reset = flexible()
   *
   * // 如果希望重置flexible对文档带来影响，试试调用
   * reset()
   * ```
   *
   * @see https://github.com/amfe/lib-flexible
   * @param designWidth=750 设计师起稿宽度
   * @param pxPerRem=100 每个1rem多少px
   * @returns 返回重置函数，适用于UI测试场景
   */
  function flexible() {
    var designWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 750;
    var pxPerRem = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100;
    var rollback = []; // adjust body font size

    function setBodyFontSize() {
      var dpr = window.devicePixelRatio || 1;

      if (document.body) {
        document.body.style.fontSize = "".concat(12 * dpr, "px");
      } else {
        document.addEventListener('DOMContentLoaded', setBodyFontSize);
      }
    }

    setBodyFontSize();
    rollback.push(function () {
      document.body.style.fontSize = '';
      document.removeEventListener('DOMContentLoaded', setBodyFontSize);
    }); // set 1rem = viewWidth / (10)

    function setRemUnit() {
      var htmlElement = document.documentElement;
      var rem = htmlElement.clientWidth / (designWidth / pxPerRem);
      htmlElement.style.fontSize = "".concat(rem, "px");
    }

    setRemUnit(); // reset rem unit on page resize

    window.addEventListener('resize', setRemUnit);

    function onPageshow(e) {
      if (e.persisted) {
        setRemUnit();
      }
    }

    window.addEventListener('pageshow', onPageshow);
    rollback.push(function () {
      document.documentElement.style.fontSize = '';
      window.removeEventListener('resize', setRemUnit);
      window.removeEventListener('pageshow', onPageshow);
    }); // 返回重置函数

    return function () {
      return rollback.forEach(function (fn) {
        return fn();
      });
    }; // detect 0.5px supports
    // if (dpr >= 2) {
    //   const fakeBody = document.createElement('body')
    //   const testElement = document.createElement('div')
    //   testElement.style.border = '.5px solid transparent'
    //   fakeBody.appendChild(testElement)
    //   docEl.appendChild(fakeBody)
    //   if (testElement.offsetHeight === 1) {
    //     docEl.classList.add('hairlines')
    //   }
    //   docEl.removeChild(fakeBody)
    // }
  }

  return flexible;

}));