vue分辨率自适应不同版本的分辨率排雷和出错

前言：由于是要求用户体验比较严重的后台管理项目，所以这里就需要我对不同的分辨率内容进行转换。因为原始项目都是使用的px，以及一部分是使用的百分比间距，所以这里我存在了一定的问题。我在最初的想法就是直接使用转换rem方法

---

排雷1

搜索关键词：px转换成rem操作

（1）.cli3版本以上的脚手架进行不同分辨率的屏幕适配

1.安装了插件lib-flexible

npm i lib-flexible -S

2.在安装全局的px转换rem插件

npm install postcss-px2rem --save

3.针对cil3版本以上的修改vue.config.js文件

        在module.exports内部插入

 css: {
        loaderOptions: {
            postcss: {
                plugins: [
                require('postcss-px2rem')({
                //remUnit，这个是填你们的设计稿的大小除以2，再除以10，
                // 不过这个要注意一点，当你改完lib-flexible时，你就需要填写除以设计稿的10就可以了。
                remUnit: 192
          })
        ]
            }
        }
    }

4.这里是最不理解的地方就是要修改npm i中nodemodules里面的文件，建议ctrl+r去查找（flexible.js文件）

原位置：function refreshRem(){
    var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 540) {
        // width = 540 * dpr;  //原来的内容
    }
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}

  修改适配范围：
       

 width = width * dpr;  //修改后的内容

5.就是创建一个文件夹，全局引入这里面的一个js文件，该文件内容全部cv（flexible.js文件）修改后的内容，然后main.js里面写入你的内容!

6.（雷电）我们需要自己调节成高度100%才能实现这个效果

---

排雷2

搜索关键词：pc端不同分辨率屏幕自适应

这里面的步骤和1方案类似

1.安装转换rem的插件

npm install postcss-px2rem px2rem-loader --save

2.在根目录src中新建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.全局引入该js文件

4.依旧是cli3版本的修改vue.config.js

修改module.exports内容添加

lintOnSave: true,
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          postcss
        ]
      }
    }
  }

在modele.exports上面写入

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

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

5.（雷电）我这边不知道是适配的问题还是什么，就会疯狂报错我cjs文件出错，就很恶心，我具体查了一下

修改内容如下

   报错Module build failed (from ./node_modules/less-loader/dist/cjs.js): TypeError: this.getOptions is not a function
这种情况一般是因为安装的版本不对
根据提示信息卸载了less-loader，然后安装了[email protected]，问题解决
此时版本less 4.1.1 less-loader 7.3.0
如果这个版本也不行的话，可以试试其他的版本
（但是还是不管用的，我改了很多版本都还是会出现我所有vue文件版本不对经的局面，就是因为在vue.config.js中使用了plugins）

---

排雷3

搜索关键词：css不同分辨率显示布局自适应

到了这里我就已经想换个方案去实现了，因为我们的自适应不好用也不能直观的转换rem，所以我考虑换成修改监听css部分就可以了，然后按照不同的分辨率进行判断测试

监听方式

.abc{ height:300px; border:1px solid #000; margin:0 auto} 
@media screen and (min-width: 1201px) { 
.abc {width: 1200px} 
} 
/* css注释：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */ 

@media screen and (max-width: 1200px) { 
.abc {width: 900px} 
} 
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */ 

想要频繁的限制就一直使用@media screen and。当然一定要控制好max-width和min-width这样做不出来的判断是不相同的

---

排雷4

搜索关键词：vue项目适配屏幕分辨率与屏幕的缩放适配

这里我找到了我想要的答案，就是不同电脑不同的分辨是会对屏幕进行百分比放大的，我们需要的操作就是使用（排雷3）的方法，然后连带着我们的固定百分百分辨率就没问题的。

1.vue项目utils下新建devicePixelRatio.js文件

cv如下代码：

class DevicePixelRatio {
  constructor() {
    // this.flag = false;
  }
  // 获取系统类型
  _getSystem() {
    // let flag = false;
    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;
    }
  }
  // 获取页面缩放比例
  //    _getDevicePixelRatio() {
  //        let t = this;
  //    }
  // 监听方法兼容写法
  _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;
    // 页面devicePixelRatio（设备像素比例）变化后，计算页面body标签zoom修改其大小，来抵消devicePixelRatio带来的变化。
    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()) { // 判断设备，目前只在windows系统下校正浏览器缩放比例
      // 初始化页面校正浏览器缩放比例
      t._correct();
      // 开启监听页面缩放
      t._watch();
    }
  }
}
export default DevicePixelRatio;

2.全局引入，引入在APP.vue里面

3.卡死了页面缩放，怎么刷新都可以了，配合雷3的方法我得到了我想要的效果，虽然很笨很呆，但是可以达到固定样式的效果。

结尾：我个人按照需求使用的是雷3和雷4结合解决的问题，雷1配合雷4也是没问题的，只要你有需求的px大小你就可以直接进行动态修改。当然雷2是因为我个人项目有问题才不知道具体问题，所以这边大家有解决的办法也是可以留言共同探讨的！！！1

谢谢大家观看