vue 使用postcss-pxtorem pc端或移动端自适应适配

一、下载依赖 postcss-pxtorem 推荐版本,建议版本号>5

npm install  postcss-pxtorem  -D

二、新建一个rem.js的文件，在main.js中引用

// 假设设计稿为1920px

const size = 192; //设计稿宽度%10 比如 1920 

// 设置rem 函数
function setRem() {
//计算出 比例来 当前分辨率的宽%设计稿宽度
  const scale = window.screen.width / 1920;
  // 给根元素设置font-size
  document.documentElement.style.fontSize =
    size * Math.min(scale, 2) + "px";
}
 setRem();
  window.onresize = function () {
    setRem();
  };

三、在vue.confing.js 填写postcss-pxtorem 配置

module.exports = {
      css: {
   loaderOptions: {
     postcss: {
       plugins: [
         // 兼容浏览器，添加前缀
         require("autoprefixer")({
           overrideBrowserslist: [
             "Android 4.1",
             "iOS 7.1",
             "Chrome > 31",
             "ff > 31",
             "ie >= 8",
             //'last 10 versions', // 所有主流浏览器最近10版本用
           ],
           grid: true,
         }),
         require("postcss-pxtorem")({
           rootValue: 192, //设计稿宽度%10 比如 1920
           exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module|src)/
           propList: ["*"], //是一个存储哪些将被转换的属性列表，这里设置为["*"]全部，假设需要仅对边框进行设置，可以写]['*','!border*']
           //selectorBlackList :['.box'],//，那例如fs-xl类名，里面有关px的样式将不被转换，这里也支持正则写法。 
           replace: true, //替换包含rems的规则。
           mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
           minPixelValue: 0, //设置要替换的最小像素值(3px会被转rem)。 默认 0
         }),
       ],
     },
   },
 },
}

到现在就可以啦. 补充:如果想使用px作为单位,可以将px写为Px