Vue中使用vw布局

随着viewport单位越来越受到众多浏览器的支持，下面将简单介绍怎么实现vw的兼容问题，用vw代替rem

1、在项目中引入插件

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

2、当我们采用vue-cli脚手架搭建完项目，安装所有依赖包之后，用npm run dev启动后，在根目录有一个 .postcssrc.js 文件，打开文件，修改为：

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {
       path: ['./src/*']
    },
    "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)(\/|\\)/
            },
  }
}

输入样式

div{
  font-size: 50px;
}

打开网页我们会发现已经变成vm单位了

image.png