页面适配

// .postcssrc.js
// 处理不了行内样式
module.exports = {
  plugins: {
    // 'postcss-aspect-ratio-mini': {}, // 等比例容器
    // 'postcss-write-svg': { utf8: false }, // 1px 方案
    'autoprefixer': {},
    'postcss-px-to-viewport': {
      viewportWidth: 1980, // (Number) The width of the viewport.
      viewportHeight: 1080, // (Number) The height of the viewport.
      unitPrecision: 5, // (Number) The decimal numbers to allow the REM units to grow to.
      viewportUnit: 'vw', // (String) Expected units.
      selectorBlackList: ['.view-ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px.
      minPixelValue: 1, // (Number) Set the minimum pixel value to replace
      mediaQuery: false, // (Boolean) Allow px to be converted in media queries.
    }
    // 'postcss-viewport-units': {
    //   filterRule: rule => rule.nodes.findIndex(i => i.prop === 'content') === -1
    // },
    // 'cssnano': {},
  }
}

需要处理行内样式用这个

只处理行内样式

需要一起使用

// vue.config.js
// style-vw-loader 插件
 chainWebpack: (config) => {

    config.module
      .rule('vue')
      .test(/\.vue$/)
      .use('style-vw-loader')
      .loader('style-vw-loader')
      .options({
          viewportWidth: 1980,//传参
      })
 }