vue项目页面不同分辨率适配

首先下载lodash插件

npm i lodash -S

然后在App.vue中导入

import _ from 'lodash'

给app容器挂上ref=“app”

1.  
   <template>
2.  
   <div id="app" ref="app">
3.  
   <router-view />
4.  
   </div>
5.  
   </template>

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

1.  
   <script>
2.  
   export default {
3.  
   name: "App",
4.  
   mounted() {
5.  
   this.$nextTick(() => {
6.  
   const $app = this.$refs.app;
7.  
   // 设置 屏幕 百分比 尺寸 适配
8.  
   const standardScale = "100%" / "100%";
9.  
    
10.  
    window.addEventListener(
11.  
    "resize",
12.  
    _.debounce(function () {
13.  
    const docHeight = document.body.clientHeight;
14.  
    const docWidth = document.body.clientWidth;
15.  
     
16.  
    if (docWidth < 1680) {
17.  
    const currentScale = docHeight / docWidth;
18.  
    let [scale, translate] = [0, 0];
19.  
    if (currentScale < standardScale) {
20.  
    // 以高度计算
21.  
    scale = docHeight / 1080;
22.  
    const shouleWidth = 1920 * scale;
23.  
     
24.  
    const offsetWidth = docWidth - shouleWidth;
25.  
    translate =
26.  
    offsetWidth > 0 ? `translate(${offsetWidth / 2}px, 0)` : "";
27.  
    } else {
28.  
    // 以宽度计算
29.  
    scale = docWidth / 1920;
30.  
    const shouleHeight = 1080 * scale;
31.  
    const offsetHeight = docHeight - shouleHeight;
32.  
    translate =
33.  
    offsetHeight > 0 ? `translate(0, ${offsetHeight / 2}px)` : "";
34.  
    }
35.  
    console.log(translate);
36.  
    $app.style.cssText = `
37.  
    transform: scale(${scale}) ${translate};
38.  
    transform-origin: top left;
39.  
    min-width: 1920px;
40.  
    min-height: 1080px;
41.  
    `;
42.  
    } else {
43.  
    $app.style.cssText = "";
44.  
    }
45.  
    }),
46.  
    300
47.  
    );
48.  
     
49.  
    if (document.createEvent) {
50.  
    var event = document.createEvent("HTMLEvents");
51.  
    event.initEvent("resize", true, true);
52.  
    window.dispatchEvent(event);
53.  
    } else if (document.createEventObject) {
54.  
    window.fireEvent("onresize");
55.  
    }
56.  
    });
57.  
    },
58.  
    };
59.  
     

注意!!!!!!!此方法的弊端

可以解决全局适配问题，但是不适用于响应式