vue根据宽度自适应屏幕

最近pc端需要使用到自适应的，网上搜了一堆，几个坑，文章会提，先说怎么实现的
首先我用的是postcss-px-to-viewport这个插件，它能将px转化为vw，px就是你设计稿上的单位

npm install postcss-px-to-viewport

安装好之后再去配置postcss文件

"postcss": {
    "plugins": {
      "postcss-px-to-viewport": {
        "unitToConvert": "px", //这里是需要转换的目标单位
        "viewportWidth": 1920, //这里是设计稿的总宽度
        "viewportHeight": " ",  //这里是设计稿的总高度，如果是按照宽度比来写的，这个可以不配置
        "unitPrecision": 13, //这里是转换保留多少位小数
        "propList": [
          "*"
        ],
        "viewportUnit": "vw", //这里是转换后的单位
        "fontViewportUnit": "vw",
        "selectorBlackList": [
          ".ignore-",
          ".hairlines"
        ],
        "minPixelValue": 1,
        "mediaQuery": false,
        "replace": true,
        "exclude": [],
        "landscape": false,
        "landscapeUnit": "vw",
        "landscapeWidth": 1134
      }
    }
  },

然后就可以了，常用的就我写的那些属性了，想要了解更多属性的，请移步到官方文档去看，引入这个有几个注意点：
1、vue 2.x 以上这段代码是放在package.json文件里面的，如图：

因为vue2.x不会有postcss.config.js这个文件
2、如果你的根目录下有postcss.config.js这个文件的话，那就是在这个目录下配置文件
3、这个插件只会转化CSS里面的单位，对于行内元素来说它是不会被转换的

一开始安装了4个文件，导致项目报错，然后翻起以前的一个项目才记起来，只要装postcss-px-to-viewport就好了，终于完美的适配