在vue项目中实现网页整体随屏幕尺寸缩放

此处的项目为vue2版本，因为pc端的项目没有采用响应式自适应手机端的设计，所以使用lodash插件实现屏幕移动端自适应。

首先下载lodash插件。
npm i lodash -S

然后在App.vue中导入，此处的App.vue主要指的是主框架，因不同项目可自行选择。
import _ from 'lodash'

然后给app容器挂上ref=“app”

<template>
  <a-config-provider :locale="locale">
    <div id="app" ref="app">
      <router-view />
    </div>
  </a-config-provider>
</template>

然后在mounted使用如下方法（其中的1080以及1920为定义的画布尺寸）：

mounted () {
    this.$nextTick(() => {
      const $app = this.$refs.app
      const standardScale = 1080 / 1920

      window.addEventListener(
        'resize',
        _.debounce(function () {
          const docHeight = document.body.clientHeight
          const docWidth = document.body.clientWidth

          if (docWidth < 1680) {
            const currentScale = docHeight / docWidth
            let [scale, translate] = [0, 0]
            if (currentScale < standardScale) {
              // 以高度计算
              scale = docHeight / 1080
              const shouleWidth = 1920 * scale
              const offsetWidth = docWidth - shouleWidth
              translate = offsetWidth > 0 ? `translate(${offsetWidth / 2}px, 0)` : ''
            } else {
              // 以宽度计算
              scale = docWidth / 1920
              const shouleHeight = 1080 * scale
              const offsetHeight = docHeight - shouleHeight
              translate = offsetHeight > 0 ? `translate(0, ${offsetHeight / 2}px)` : ''
            }
            console.log(translate)
            $app.style.cssText = `
            transform: scale(${scale}) ${translate};
            transform-origin: top left;
            min-width: 1920px;
            min-height: 1080px;
          `
          } else {
            $app.style.cssText = ''
          }
        }),
        200
      )

      if (document.createEvent) {
        var event = document.createEvent('HTMLEvents')
        event.initEvent('resize', true, true)
        window.dispatchEvent(event)
      } else if (document.createEventObject) {
        window.fireEvent('onresize')
      }
    })
  },

如果有更好的方法，可以评论区留言，交流学习~