vite+vue3移动端自适应方案

postcss-pxtorem+amfe-flexible

• amfe-flexible用来根据页面的窗口变化，设置不同的根元素的rem值
• postcss-pxtorem 把页面的px 转换成rem
• 如果使用vant 组件，不改变vant 的组件，使用以下配置

 'postcss-pxtorem': {
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75
      },
      propList: ['*'],
      selectorBlackList: ['.el-', '.pc-'],
      exclude: /node_modules/i // 不需要转换的文件夹
    }
1
2
3
4
5
6
7
8

postcss-px-to-viewport

• postcss-px-to-viewport 将px转换成视口单位vw
• autoprefixer 添加css前缀

  'postcss-px-to-viewport': {
      viewportWidth: 750,
      exclude: /node_modules/i
    },
    autoprefixer: {
      overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
    }
1
2
3
4
5
6
7