vue适配各个屏幕

1:不是响应式，只是用缩放来适配各个pc

2: 不可固定app.vue的宽度

3：之前的使用transform: scale();方案作废

1：创建zoom.js文件，放到src/utils文件夹中

class zoom {
  // 监听方法兼容写法
  addHandler(element, type, handler) {
    if (element.addEventListener) {
      element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
      element.attachEvent('on' + type, handler);
    } else {
      element['on' + type] = handler;
    }
  }
  // 校正浏览器缩放比例
  correct() {
    // 当前页面屏幕分辨率
    let width = document.documentElement.clientWidth
   //1920 为你的设计稿的宽度
    document.getElementsByTagName('body')[0].style.zoom = width/1920 ;
	
  }
  // 监听页面缩放
  watch() {
    this.addHandler(window, 'resize', function() { // 注意这个方法是解决全局有两个window.resize
      // 重新校正
      this.correct()
    })
  }
  // 初始化页面比例
  init() {
    // 初始化页面校正浏览器缩放比例
    this.correct();
    // 开启监听页面缩放
    this.watch();
  }
}
export default zoom;

在App.vue

import zoom from '@/utils/zoom'

created() {
            new zoom().init()
        },

使用中发现了一些问题（当项目中使用了element ui时会出现弹窗的错乱 比如select 组件）

解决方法

1：新建文件夹放克隆下来element ui源文件

git clone https://github.com/ElemeFE/element.githttps://github.com/ElemeFE/element.git2：再npm i

3:找到packages文件

再去找到select文件

将上述文件里面的popperAppendToBody    appendToBody这两个置为false

以及element-ui/src/utils/vue-popper文件的置为false

然后打包element ui源码

将打包好后的lib文件替换到自己项目node_modules目录下的element ui文件中的lib文件即可