大屏自适应的技巧

搭配宽高都等比自适应的方法

function debounce(fn,delay) {
    let timer
    return function(){
        clearTimeout(timer)
        timer = setTimeout(() => {
            fn.apply(this, arguments)
        },delay)
    }
 }

export function autoScale(selector,options) {
  const el = document.querySelector(selector)
  const {width, height} = options
  el.style.transformOrigin = 'top left'
  el.style.transition = 'transform 0.2s'
  function init() {
      const scaleX = innerWidth / width
      const scaleY = innerHeight / height
      const scale = Math.min(scaleX,scaleY)
      const left = (innerWidth - width * scale) /2
      const top = (innerHeight - height * scale) / 2
      el.style.transform = `translate(${left}px, ${top}px) scale(${scale})`
  }
  init()
  addEventListener('resize',debounce(init,200))

}