不同分辨率屏幕的适配

使用两个转换库

• postcss-pxtorem

  postcss-pxtorem 插件，可以从像素单位生成 rem 单位

• amfe-flexible

  amfe-flexible 是配置可伸缩布局方案，主要是将 1rem 设为 viewWidth/10
  PC端设计稿为1920时：1920/10 = 192
  移动端设计稿为750时：750/10 = 75

在项目中配置

• 1、安装依赖

  npm install postcss-pxtorem
  npm install amfe-flexible

• 2、vue.config.js中配置

  const postCssPxToRem = require('postcss-pxtorem')
  // import postCssPxToRem from 'postcss-pxtorem'
  
  module.exports = {
    css: {
      loaderOptions: {
        postcss: {
          plugins: [
            postCssPxToRem({
              rootValue: 192, // 设计稿尺寸 1rem 的大小
              propList: ['*'] // 需要转换的属性列表，*表示全部转换
            })
          ]
        }
      }
    }
  }

  或vite.config.ts中配置

  import postCssPxToRem from 'postcss-pxtorem'
  
  export default defineConfig({
    css: {
      postcss: {
        plugins: [
          postCssPxToRem({
            rootValue: '192',
            propList: ['*']
          })
        ]
      }
    }
  })

• 3、main.js 中引入

  import 'amfe-flexible'