关于Vue项目下页面自适应pc端不同分辨率尺寸的方法

前面我有一篇博客说的是用动态监听body的zoom然后自己设置，或者是window.devicePixelRatio和reansform的scale来处理笔记本等小屏幕的缩放兼容。
这篇介绍一下px2rem-loader和postcss-px2rem来处理响应式视图

1. 首先需要安装 px2rem-loader和postcss-px2rem两个package
这里是用npm进行安装：px2rem-loader和postcss-px2rem

npm install px2rem-loader -S
npm install postcss-px2rem -S

这两个包有时候会跟基础的包产生依赖冲突，给命令新增legacy-peer-deps即可，
那么命令–legacy-peer-dep里的peerDependency是什么依赖呢？根据geeksforgeeks网站里的定义：

Peer Dependencies: In package.json file, there is an object called as peerDependencies and it consists of all the packages that are exactly required in the project or to the person who is downloading and the version numbers should also be the same. That is the reason they were named as peerDependencies. The best example is ‘react’ which is common in every project to run similarly.

翻译过来就是在package.json文件中，存在一个叫做peerDependencies（对等依赖关系）的对象，它包含了项目里需要的所有的包或则用户正在下载的版本号相同的所有的包（意思就是对等依赖关系指定我们的包与某个特定版本的npm包兼容）；对等依赖关系最好的例子就是React，一个声明式的创建用户界面的JS库。
其实我也看不懂，但是不影响我们下一步，继续安装：

npm install px2rem-loader -S --legacy-peer-deps
npm install postcss-px2rem -S --legacy-peer-deps

2. 引入自适应的JS文件
在项目存放js文件目录下，比如util目录，新建pxrem.js文件

const baseSize = 16
// 设置 rem 函数
function setRem () {
  // 页面宽度相对于 2048宽的缩放比例，根据需要修改。
  const scale = document.documentElement.clientWidth / 2048
  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，根据需要修改）
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

main.js

import '@/utils/pxrem.js'

3. vue.config.js中进行配置

const px2rem = require('postcss-px2rem')
const postcssRem = px2rem({
  // 基准大小 baseSize，可以使12、14等需要和rem.js中相同
  remUnit: 16
})
module.exports = {
	publicPath: "./",
	  lintOnSave: true,
	  css: {
	    loaderOptions: {
	      postcss: {
	        plugins: [
	          postcssRem 
	        ]
	      }
	    }
	}
}

4. 备注
完成以上的安装和配置，既可以进行页面的自适应 ，在页面样式css里自动会将px单位转换成rem的单位。

注意：一定要在css中书写，写在行内的样式是不会被转成rem单位的，有些样式如果不生效，需要加上!important ，对于有的css样式不想被转换为rem可在相应的css后面加上/no/。