Vue项目的适配

Vue中使用vw实现移动端适配👍

  1. 我们在vue移动端项目中的适配一般都采用rem，但是rem也不是能兼容所有的终端。随着viewport单位越来越受到众多浏览器的支持，下面简单介绍怎么实现vw的兼容问题，用vw代替rem.
  • 当我们采用vue-cli脚手架搭建完项目，安装所有依赖包之后，用npm run dev启动后，在根目录有一个 .postcssrc.js 文件，文件结构如下： 
    1
    2
    3
    4
    5
    module.exports = {
        "plugins": {
            "autoprefixer": {}
        }
    }
  1. 然后我们安装: 
    1
    npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --save
  • 安装成功之后，在项目根目录下的package.json文件中，可以看到新安装的依赖包.
  1. 接下来在.postcssrc.js文件对新安装的PostCSS插件进行配置： 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    module.exports = {
        "plugins": {
            "postcss-import": {},
            "postcss-url": {},
            "postcss-aspect-ratio-mini": {},
            "postcss-write-svg": {
                utf8: false
            },
            "postcss-cssnext": {},
            "postcss-px-to-viewport": {
                viewportWidth: 750,   // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
                viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定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
            }
        }
    }

  • cssnano：主要用来压缩和清理CSS代码。在Webpack中，cssnano和css-loader捆绑在一起，所以不需要自己加载它。在cssnano的配置中，使用了preset: “advanced”，所以我们需要另外安装：

    1
    npm i cssnano-preset-advanced --save-dev
    1
    2
    3
    4
    "cssnano": {
        "autoprefixer": false,
        "postcss-zindex": false
    }

  • 注意: 上面的代码把autoprefixer和postcss-zindex禁掉了。前者是有重复调用，只要启用了这个插件，z-index的值就会重置为1。千万记得将postcss-zindex设置为false。