vue 适配不同屏幕 使用rem布局

当使用 px进行开发 项目进行到一半的时候，这个时候老板要求进行 rem适配怎么办？？？？？

不慌不慌 我们可以使用px 转换 rem的插件

比如 安装 npm install postcss-px2rem-exclude --save
这个插件的优点是 可以排除第三方ui库 比如vant 不把第三库的样式px转为rem。
然后 在项目根目录下 也就是和 vue.config.js同级下创建 postcss.config.js
内容如下:

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px2rem-exclude": {
      remUnit: 75, // 根大小 750px  = 750/75 = 10 rem
      exclude: /node_modules/i, //忽略 node_modules 目录下的所有文件
    },
  },
};

第二部 进行不同设备之间的适配 利用 rem单位的特性 （相对根标签 html的字体大小） 比如 html的font-size = 20 px 那么 1rem 就是 20px；
接下来 创建rem.js 这个位置你自己 进行放置。
内容 如下:

window.addEventListener("resize", function () {
  let w = window.innerWidth;
  if (w > 750) w = 750;
  document.documentElement.style.fontSize = w / 10 + "px";
//这里 我们自行规定了 1rem 为浏览器窗口宽度 的十分之 1 。 还有个地方是 我们规定了，浏览器的最大宽度 为750  当超过 750的时候 根字体大小还取 750浏览器宽度的字体大小。。不过 css也要进行配合， 需要给你的内容盒子 加入 max-width: 750px;
});

//  在index.html 还要进行 移动端窗口的视频
<meta
  name="viewport"
  content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>

然后在 main.js  引入 rem.js

最后 就可以进行 px单位开发  项目了。