Vue 屏幕适配 postcss-pxtorem

此适配方案是每次屏幕尺寸或分辨率发生大小的时候都会把所有的px替换成rem单位。
1、安装依赖

npm install postcss-pxtorem -D

2、在根目录创建postcss.config.js文件

module.exports = {
  plugins: {
autoprefixer: {},
"postcss-pxtorem": {
  rootValue: 19.2,
  propList: ["*"]
}
 }
};

3、创建rem.js

// 设置 rem 函数
function setRem() {
 // 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16
 let htmlWidth =
    document.documentElement.clientWidth || document.body.clientWidth;
  //得到html的Dom元素
  let htmlDom = document.getElementsByTagName("html")[0];
  //设置根元素字体大小
  htmlDom.style.fontSize = htmlWidth / 100 + "px";
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function() {
  setRem();
};

4、将rem.js引入main.js中

import "./你的路径/rem.js";

5、最后别忘了重启项目！

下面随便找个东西测试一下
我这写了一个100px * 100px的图片， 在代码中是这样的

运行后在控制台中是这样的

大功告成！