vue2.x使用响应式vw布局(px自动转为vw)

浏览器支持一览

1、依赖包引入

yarn add postcss-px-to-viewport-opt postcss-viewport-units cssnano cssnano-preset-advanced --dev

2、更改项目根目录下.postcssrc.js文件配置

module.exports = {

    "plugins": {

        "postcss-import": {},

        "postcss-url": {},

        "autoprefixer": {},

        "postcss-px-to-viewport-opt": {

        viewportWidth: 750,// 设计稿宽度

        viewportHeight: 1334,// 设计稿高度，可以不指定

        unitPrecision: 3,// px to vw无法整除时，保留几位小数

        viewportUnit: 'vw',// 转换成vw单位    

        selectorBlackList: ['.ignore', '.hairlines'],// 不转换的类名

        minPixelValue: 1,// 小于1px不转换

        mediaQuery: false, // 允许媒体查询中转换

        exclude: /(\/|\\)(node_modules)(\/|\\)/          // 排除node_modules文件中第三方css文件

        },

        "postcss-viewport-units":{},

        "cssnano": {

            preset: "advanced",

            autoprefixer: false,// 和cssnext同样具有autoprefixer，保留一个

            "postcss-zindex": false

        }

    }

}

3、添加全局样式消除img被插件的影响

img {

    content: normal !important;

}