vue中利用PostCSS实现移动端自适应

1.利用npm安装下面9个插件

2.将下列代码复制到.postcssrc.js

module.exports = {

   "plugins": {

     "postcss-import": {},

     "postcss-url": {},

     "postcss-aspect-ratio-mini": {},

     "postcss-write-svg": {

       utf8: false

     },

     "postcss-cssnext": {},

     "postcss-px-to-viewport": {

       viewportWidth: 750, //视窗的宽度（设计稿宽度）

       viewportHeight: 1334,

       unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）

       viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw

       selectorBlackList: ['.ignore', '.hairlines'], //指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名

       minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值

       mediaQuery: false // 允许在媒体查询中转换`px`

     },

     "postcss-viewport-units": {},

     "cssnano": {

       preset: "advanced",

       autoprefixer: false,

       "postcss-zindex": false

     }

   }

}

3.在写css的时候，直接写设计图上的px即可，会自动转成vw单位。

参考文档：https://juejin.im/entry/5a9d07b76fb9a028cb2d2032