vue项目实现页面自适应 通过lib-flexible插件+postcss-px2rem-exclude

lib-flexible
postcss-px2rem-exclude
淘宝也是采用这用自适应

lib-flexible：
会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px。假如量的某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem,那么这就有点麻烦了，我他么还要自己计算，不要慌，看下面：

postcss-px2rem-exclude：
postcss-px2rem-exclude 这个插件就是将px单位转换成rem,方便计算，假如有一设计稿为750，那么1rem 就等于75px；此时设计稿是多少px ,直接用多少px 就好了

npm安装

npm install lib-flexible --save
npm install postcss-px2rem-exclude --save-dev

复制代码
在main.js中引入lib-flexible
import "lib-flexible/flexible.js";

vue-cli3配置方式：在根路径下新增postcss.config.js文件

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px2rem-exclude": {
      remUnit: 75,
    }
  }
}

注意：
如果vant项目中这么使用，会改变vant 样式哦，为防止，有两种解决方式，一要么事改设计稿大小为375，因为vant是参考这个的，这显然不是很友好，
可以修改postcss.config.js为以下内容

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px2rem-exclude": {
      remUnit: 75,
      exclude: /node_modules/i  //完美解决第三方ui库样式变小问题
      "selectorBlackList":["van-"] //排除vant框架相关组件 或者某样式不受rem的影响 }) ] }
    }
  }
}