vue适配各个屏幕

走，带你去玩2023-10-29 22:41

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

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

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

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

javascript 复制代码

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

javascript 复制代码

import zoom from '@/utils/zoom'

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