vue3+vite安装postcss-pxtorem

vue3+vite安装postcss-pxtorem

1、安装依赖

npm install postcss-pxtorem -D

npm install amfe-flexible -D

2、配置vite.config.ts

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

3、main.ts导入

import 'amfe-flexible'

安装后效果
比如设计稿为750px ,在iphone6/7/8中显示的宽度为750/75,也就是10rem,此时的font-size应该为37.5px