rem-flexible/dist/main.es.js

Build flexible page on mobile platform

/**
 * 可伸缩布局方案
 *
 * ```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)
  // }
}

export { flexible as default };