问题描述:

1.当我们开发h5的时候,采用rem进行页面适配
rem.js文件代码

!function (d) {
  var c = d.document;
  var a = c.documentElement;
  var b = d.devicePixelRatio;
  var f;

  function e() {
    var h = a.getBoundingClientRect().width, g;
    if (b === 1) {
      h = 720
    }
    if(h>720) h = 720;//设置基准值的极限值
    g = h / 7.5;
    a.style.fontSize = g + "px"
  }

  if (b > 2) {
    b = 3
  } else {
    if (b > 1) {
      b = 2
    } else {
      b = 1
    }
  }
  a.setAttribute("data-dpr", b);
  d.addEventListener("resize", function () {
    clearTimeout(f);
    f = setTimeout(e, 200)
  }, false);
  e()
}(window);

2.main.js引入,并使用

//处理适配
import 'lib-flexible'
(function () {
  var rem = document.createElement('script')
  rem.src = '../rem.js'
  document.body.appendChild(rem)
})()

3.当手机调试时,初始页面就会出现页面放大再缩小的一个短暂过渡的变化

造成原因

页面计算过程较慢

解决方法

1.在body之前引入使用,删除main.js里面引用的方法
2.在index.html里面创建使用

image.png

特此记录