vue 项目PC端适配屏幕

一、rem适配

说起屏幕的适配，不得不说的是postcss-px2rem和px2rem-loader；

1.安装  postcss-px2rem和px2rem-loader

npm install postcss-px2rem px2rem-loader --save

2、 新建utils目录下新建rem.js等比适配文件  

// rem等比适配配置文件
// 基准大小
const baseSize = 16
// 设置 rem 函数
function setRem () {
  // 当前页面屏幕分辨率相对于 1920宽的缩放比例，可根据自己需要修改
  const scale = document.documentElement.clientWidth / 1920
  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

3、在main.js中引入rem.js

import '@/utils/rem.js'

4、配置 vue.config.js

// 引入等比适配插件
const px2rem = require('postcss-px2rem')

// 配置基本大小
const postcss = px2rem({
  // 基准大小 baseSize，需要和rem.js中相同
  remUnit: 16
})

// 使用等比适配插件
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          postcss
        ]
      }
    }
  }
}

二、对于屏幕宽度过窄，展示不全的适配，使用属性zoom进行缩放展示

1.创建zoom.js

class ZoomRatio {
  constructor() {
    // this.flag = false;
  }
  
  // 监听方法兼容写法
  _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 t = this;
    // 当前页面屏幕分辨率
    let width = document.documentElement.clientWidth
    let defaultZoom = 1
   // 屏幕宽度小于1281时候，进行缩小0.9，否则保持不变
    width < 1281 ? defaultZoom = 0.9 : defaultZoom = 1
    document.getElementsByTagName('body')[0].style.zoom = defaultZoom ;
    

  }
  // 监听页面缩放
  _watch() {
    let t = this;
    t._addHandler(window, 'resize', function() { // 注意这个方法是解决全局有两个window.resize
      // 重新校正
      t._correct()
    })
  }
  // 初始化页面比例
  init() {
    let t = this;
    // 初始化页面校正浏览器缩放比例
    t._correct();
    // 开启监听页面缩放
    t._watch();
  }
}
export default ZoomRatio;

2.全局导入App.vue

<script>
import ZoomRatio from '@/utils/ZoomRatio'
export default {
  namjse: 'App',
  data() {
    return {
    }
  },
  created() {
    new ZoomRatio().init()
  }
}
</script>

三、笔记本或者显示器 默认设置125%或者150%缩放，导致布局错乱的时候也可以使用zoom缩放

1.创建 devicePixelRatio.js

class DevicePixelRatio {
  constructor() {
    
  }
  // 获取系统类型
  _getSystem() {
    
    var agent = navigator.userAgent.toLowerCase();
    //var isMAC = /macintosh|mac os x/i.test(navigator.userAgent);
    //if(isMac) {
    //return false;
    //}
    // 现只针对Windows处理，其它系统暂无该情况，如有，继续在此添加
    if (agent.indexOf('windows') >= 0) {
      return true;
    }
  }

  // 监听方法兼容写法
  _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 t = this;
    // 当前页面屏幕分辨率
    let width = document.documentElement.clientWidth
    document.getElementsByTagName('body')[0].style.zoom = 1 / window.devicePixelRatio

  }
  // 监听页面缩放
  _watch() {
    let t = this;
    t._addHandler(window, 'resize', function() { // 注意这个方法是解决全局有两个window.resize
      // 重新校正
      t._correct()
    })
  }
  // 初始化页面比例
  init() {
    let t = this;
    // 初始化页面校正浏览器缩放比例
    if (t._getSystem()) {
         t._correct();
        // 开启监听页面缩放
        t._watch();
    }
   
  }
}
export default DevicePixelRatio;

2.全局导入App.vue

<script>
import DevicePixelRatio from '@/utils/devicePixelRatio'
export default {
  namjse: 'App',
  data() {
    return {
    }
  },
  created() {
    new DevicePixelRatio().init()
  }
}
</script>