1、什么是px2rem

px2rem是一個插件能將px自動轉(zhuǎn)換為rem，以適配各種不同的屏幕尺寸。前端開發(fā)可以直接使用設(shè)計稿量出的尺寸或者藍(lán)湖給出的px進(jìn)行布局，這樣極大的提高了開發(fā)效率。

2、前提條件

1、vue3.x新建的項目，這里只說vue3.x的適配，因為vue2.x一般都創(chuàng)建很久了，或者不需要這么做了，亦或者改動代價太大，就不討論了。
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 版本過高可能導(dǎo)致問題，作者習(xí)慣指定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為設(shè)計稿寬度
        "propList": [
          "*"
        ]
      }
    }
  }

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

import 'lib-flexible/flexible.js'

重新運行項目，這樣項目css里面使用px就會自動轉(zhuǎn)化為rem以適配各種屏幕尺寸。寫代碼過程中，直接用藍(lán)湖或者量出的設(shè)計稿尺寸進(jìn)行布局就好了，大大加快了布局效率。

4、注意事項

1、如果某一個元素不希望進(jìn)行自動換算，我們有兩個比較方便的辦法：
1）使用style來寫多少像素。
2）我們可以在單位的后面添加/no/，即可忽略當(dāng)前換算。例如：

height: 44px; /*no*/

2、設(shè)計稿大于540px時，我們需要修改lib-flexible里面的限制才能使用，否則最大基準(zhǔn)尺寸不能大于540，修改如下：
文件位置：node_modules/lib-flexible/flexible.js

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