vue自适应布局

vue自适应布局3种方法：
1.传统布局 ：
写个js全局引入页面即可

 //方式一
    const deviceWidth = document.documentElement.clientWidth || document.body.clientWidth;
    document.querySelector('html').style.fontSize = deviceWidth / 7.5 + 'px';
    
//方式二
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + "px";
    window.addEventListener(
      "resize",
      function() {
        document.documentElement.style.fontSize =
          document.documentElement.clientWidth / 7.5 + "px";
      },
      false
    );
//方式一和方式二 效果一样

2.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文件

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

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

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