Vue 中 使用postcss-px-to-viewport 移动端适配

为了移动端适配，我们可以使用postcss-px-to-viewport插件来进行px-vw的单位转换。GitHub

第一步：安装插件

npm i postcss-px-to-viewport --save-dev

第二步：在一级目录中新建**postcss.config.js**,然后在文件中添加以下代码

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px-to-viewport": {
      viewportWidth: 375,//视窗的宽度，对应的是我们设计稿的宽度
      viewportHeight: 667,//视窗的高度，对应的是我们设计稿的高度
      unitPrecision: 5,//指定'px'转换为视窗单位值得小数位数（很多时候无法整除）
      viewportUnit: 'vw',//指定需要转换成的视窗单位，这里使用vw
      selectorBlackList: ['ignore', 'tab-bar', 'tab-bar-item'],//指定不需要转换的类(样式的类名)
      minPixelValue: 1,//小于或等于‘1px’不转换为视窗单位
      mediaQuery: false,//允许在媒体查询中转换'px'
      exclude: [/TabBar/, /CartBottomBar/],//不进行单位转换的文件（数组中内容为正则表达式）
      landscape: false,  // 是否添加根据landscapeWidth生成的媒体查询条件 @media (orientation: landscape)
      landscapeUnit: "vw", // 横屏时使用的视窗单位
      landscapeWidth: 1134 // 横屏时使用的视窗宽度
    },
  }
}
// exclude中存放的元素必须是正则表达式