vue3-vite 使用rem转换插件

1. 安装插件

npm install amfe-flexible --save
npm install postcss-pxtorem --save-dev

2、main.ts中 引入插件

// main.ts
import 'amfe-flexible'

3. vite.config.ts中配置参数

//......
import postCssPxToRem from 'postcss-pxtorem'

export default defineConfig({
  // ......
  css:{
    postcss: {
      plugins: [
        // 移动端自适应rem布局
        postCssPxToRem({
          // 1rem的大小 (设计稿宽度/10)
          rootValue: 75,
          // 需要转换的属性，这里选择全部都进行转换
          propList: ['*', '!border*'], //需要转换的属性
          selectorBlackList: [], //css选择器黑名单， 防止某些选择器被转换
          exclude: /\/node_modules\//i, //忽略包文件转换rem
        }),
      ],
    },
  }

})

4. 页面中元素尺寸正常写px, 插件就会自动转换为rem

5. 适配PC端， PC端浏览器打开 保持移动端布局（限制最大宽度）

   在全局样式文件 style.css中写代码：(屏幕大于1000px的时候写死html的font-size值为200px)

   @media screen and (min-width: 1000px) {
     html {
         font-size: 200px !important;
     }
   }