實現頁面的自動縮放

場景：我有一張背景圖，需要讓它佈滿整個窗口，且根據窗口的變化進行相應的縮放

整體思路：
config.js 中配置全屏時的一些參數，比如說我這裏設置寬，高
zoom.js 中拿到 config.js 中的寬高，設置給 body，拿到 x 、y 方向的縮放比，設置給 body
main.js 中監聽窗口尺寸變化，設置回調，當窗口發生縮放的時候，zoom 函數就會調用

配置項文件 config.js

export default {
  pageWidth: 3360,
  pageHeight: 1890
}

縮放函數 zoom.js

import config from './config'

export default () => {
  const {
    pageWidth,
    pageHeight
  } = config

  const body = document.querySelector('body')

  body.style.width = `${pageWidth}px`
  body.style.height = `${pageHeight}px`
  const x = window.innerWidth / pageWidth // x 方向縮放比例
  const y = window.innerHeight / pageHeight // y 方向縮放比例
  body.style.transform = `scale(${x}, ${y})`
}

main.js

import zoom from './assets/scripts/tool/zoom'
zoom()
window.addEventListener('resize', zoom)

see you ~