页面自适应

1. 安装插件

npm i postcss-pxtorem
npm i amfe-flexible

1. 到配置文件中 vite.config.ts 添加一点配置

import pxToRem from 'postcss-pxtorem' // 引入插件
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  // 添加的属性代码
  css: {
    postcss: {
      plugins: [
        pxToRem({
          // 这里调整页面整体字体的初始大小
          rootValue: 150,
          propList: ['*']
        })
      ]
    }
  }
})

3. main.js 文件中引入第二个插件 完成适配

import 'amfe-flexible'

注意：如果有些字体并没有根据页面大小变化 那就给该节点添加 font-size 样式才能形成适配