vue3.0 PC端自适应不同分辨率电脑

使用rem单位去做页面的适配，先来了解一下什么是rem。rem是CSS3新增的一个相对单位（root em，根em），我们可以通过去设定X rem=Y px（x和y为自定义数值）如图设定1rem=10px

第一步：安装相应的依赖为我们自动将全局的px转换成rem

npm i lib-flexible-computer -S 
npm i px2rem-loader -D
npm i postcss-px2rem

第二步：在main.js中引入

import "lib-flexible-computer";

第三步：src同级下建立一个vue.config.js文件，增加以下代码

module.exports = {
  publicPath: "./",
  css: {   //添加该部分代码
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          require("postcss-px2rem")({  //引入
            remUnit: 192///设计图宽度/10
          })
        ]
      }
    }
  }
};

到这一步可以发现，页面可以根据浏览器窗口的缩放而变化，但是新的问题就出现了，当窗口大小减小时，页面内容也跟着减少直至看不见。想让窗口缩小到一定比例后不再缩小。

第四步：修改flexible-computer.js依赖代码，设置窗口rem比例
可以获取系统实际分辨率宽度和窗口宽度，判断rem的比例

//原代码获取窗口宽度
var width = docEl.getBoundingClientRect().width;
//获取系统分辨率宽度
var docScreen = windows.screen.width;

//根据自身增加判断 （仅供参考）
if(docScreen/width<1.1){
    var rem = width / 10;
}else{
	var rem = docScreen / 10;
}

参考文章https://blog.csdn.net/liulubo520/article/details/113657610