Vue页面自适应pc端不同分辨率尺寸方法

一、所需插件

  在vue项目中安装 px2rem-loader和postcss-px2rem两个插件，这里用npm进行安装：

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

二、引入自适应的JS文件

  在项目存放JS的文件目录下，新建pxrem.js文件，然后再main.js中进行引入。

//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 '@/assets/js/pxrem.js'

三、vue.config.js中进行配置

    若没有vue.config.js文件，则在该vue项目根目录下新建它，然后重新run一下vue项目，才能生效，具体配置如下： 

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

四、使用注意

    完成以上的安装和配置，既可以进行页面的自适应 ，在页面样式css里自动会将px单位转换成rem的单位 ，可以在浏览器开发者工具F12看到，其实px已经被转为了rem。

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