vue3.x移动端适配px2rem

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": [
          "*"
        ]
      }
    }
  }

3、在项目入口文件main.js中引入lib-flexible

import 'lib-flexible/flexible.js'

重新运行项目，这样项目css里面使用px就会自动转化为rem以适配各种屏幕尺寸。写代码过程中，直接用蓝湖或者量出的设计稿尺寸进行布局就好了，大大加快了布局效率。

4、注意事项

1、如果某一个元素不希望进行自动换算，我们有两个比较方便的办法：

1）使用style来写多少像素。

2）我们可以在单位的后面添加/no/，即可忽略当前换算。例如：

height: 44px; /*no*/

2、设计稿大于540px时，我们需要修改lib-flexible里面的限制才能使用，否则最大基准尺寸不能大于540，修改如下：

文件位置：node_modules/lib-flexible/flexible.js

if (width / dpr > 540) {
  width = 540 * dpr;
}