vue3移动端使用pxtorem

1. 第一步

下载依赖

npm i postcss-pxtorem@5.1.1

package.json 加入以下代码，设计稿为375，因此这里rootValue为37.5

"postcss": {

    "plugins": {

      "postcss-pxtorem": {

        "rootValue": 37.5,

        "propList": [

          "*"

        ]

      }

    }

  }

2. 第二步

下载依赖

npm i lib-flexible@0.3.2

main.ts 加入

import 'lib-flexible/flexible.js'

3. 第三步，测试

vue文件加入代码

<template>
    <div class="box"></div>
</template>

<style scoped>
body{
  margin: 0;
  padding: 0;
}
.box{
  width: 375px;
  height: 200px;
  background-color: pink;
}
</style>

打开浏览器发现375与414兼容，说明成功

4. 打包

使用ts时，因为第二步引入了js文件，打包会不通过。解决方法：tsconfig.json 加入

"allowJs": true,