自适应

156 阅读1分钟

1.新建utils文件夹 写入zoom.js文件

2.定义如下代码


window.onload = function() {
  document.body.style.zoom = 'normal' //避免zoom尺寸叠加
  let scale = document.body.clientWidth / 1920
  document.body.style.zoom = scale
}
//防抖,避免resize占用过多资源
;(function() {
  var throttle = function(type, name, obj) {
    obj = obj || window
    var running = false
    var func = function() {
      if (running) {
        return
      }
      running = true
      requestAnimationFrame(function() {
        obj.dispatchEvent(new CustomEvent(name))
        running = false
      })
    }
    obj.addEventListener(type, func)
  }

  throttle('resize', 'optimizedResize')
})()

window.addEventListener('optimizedResize', function() {
  document.body.style.zoom = 'normal'
  let scale = document.body.clientWidth / 1920
  document.body.style.zoom = scale
})

3.在main.js引入

import './utils/zoom'