#移动端想实现屏幕的自适应#

下载两个插件：

npm install postcss-pxtorem@5.1.1 amfe-flexible -S

1.amfe-flexiblehi配置可以伸缩布局的方案，主要是将1rem设置为viewwidth/10

2.postcss-pxtorem是postcss的插件，用于将像素单元生成rem单位

文件配置//vue.config.js

import postCssPxToRem from "postcss-pxtorem"
export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [
        postCssPxToRem({
          rootValue: 75, // 设计稿尺寸 1rem大小
          propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
        })
      ]
    }
  }
})

main.ts导入

import 'amfe-flexible'