vue3搭建移动端项目(3)-移动端px适配方案

1、什么是px2rem

px2rem是一个插件能将px自动转换为rem，以适配各种不同的屏幕尺寸。前端开发可以直接使用设计稿量出的尺寸或者蓝湖给出的px进行布局，这样极大的提高了开发效率。

2、前提条件

1、vue3.x新建的项目，这里只说vue3.x的适配，因为vue2.x一般都创建很久了，或者不需要这么做了，亦或者改动代价太大，就不讨论了。
2、html文件里面添加如下meta

<meta name="viewport" content="width=device-width, initial-scale=1.0, 
minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover, user-scalable=no">

3、如何使用

1、安装插件
注意postcss-pxtorem 版本过高可能导致问题，作者习惯指定5.1.1

npm install postcss-pxtorem@5.1.1 --save-dev
npm install lib-flexible --save

2、配置
package.json中添加如下代码

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 37.5, //以375为设计稿宽度
        "propList": [
          "*"