vue 移动端屏幕适配 使用rem

如果项目已经开发的差不多了，没有用到rem 又要使用rem，你可以使用px转为rem的插件

第一个插件 ： 优点: 可以排除第三方ui库的px转rem
npm install postcss-px2rem-exclude --save
然后在根目录下 和vue.config.js同级下 创建 postcss.config.js

// https://github.com/michael-ciniawsky/postcss-load-config

module.exports = {
  'plugins': {
    // to edit target browsers: use "browserslist" field in package.json
    'autoprefixer': {}
  }
}

第二个插件： npm install postcss-pxtorem --save
在.postcssrc.js文件内的 plugins 添加以下配置，配后就可以在开发中直接使用 px 单位开发了

 "postcss-pxtorem": {
      "rootValue": 32,
      "propList": ["*"]
    }

最关键的rem不同设备 屏幕的适配

新建rem.js
代码如下：

window.addEventListener("resize", function () {
  let w = window.innerWidth;
  if (w > 750) w = 750;
  document.documentElement.style.fontSize = w / 10 + "px";
//这里 我们设置根字体大小 为屏幕宽度的 10分之一  而且我们规定了当浏览器屏幕超过 750的时候，根字体大小取 750/ 10 注意：这里要配合css 给你的内容盒子 也加上 max-width: 750px;
});

之后 在main.js 引入 rem.js 就可以进行 px单位不同屏幕之间的适配了。