美文网首页
vue 使用vw适配

vue 使用vw适配

作者: 柚子硕 | 来源:发表于2021-12-16 15:27 被阅读0次

    安装依赖

    npm install postcss-import postcss-loader postcss-px-to-viewport --save-dev
    npm i postcss-px-to-viewport-opt
    

    在根目录下面创建postcss.config.js

    module.exports = {
        plugins: {
            "autoprefixer": {
                path: ['./src/*']
            },
            "postcss-import": {},
            "postcss-px-to-viewport-opt": {
                "viewportWidth": "1920", //视窗的宽度,对应的是我们设计稿的宽度
                "viewportHeight": "1080", // 视窗的高度
                "unitPrecision": 2, //指定`px`转换为视窗单位值的小数位数(很多时候无法整除)
                "viewportUnit": "vw", //指定需要转换成的视窗单位,建议使用vw
                "selectorBlackList": ['#nprogress'], //指定不转换为视窗单位的类
                "minPixelValue": 1, // 小于或等于`1px`不转换为视窗单位
                "mediaQuery": false, // 允许在媒体查询中转换`px`
                // "exclude": /(\/|\\)(node_modules)(\/|\\)/
            },
        }
    };
    

    相关文章

      网友评论

          本文标题:vue 使用vw适配

          本文链接:https://www.haomeiwen.com/subject/cmjvfrtx.html