vue-cli 3.x 移动端适配px自动转为rem

1.下载依赖

npm install [email protected] --save-dev
npm install lib-flexible --save

2.在 src/main.js 中引入

import 'lib-flexible/flexible.js';

3.package.json中配置

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

4.前提

html文件里面添加如下meta

重新运行项目，项目里css使用的px就会自动转换成rem适配各种屏幕。写代码的时候直接用px就好

5. 注意

1）如果某一个元素不希望进行自动换算

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

height: 44px; /*no*/

2）进行大屏适配事，需要修改lib-flexible的源码，修改如下：
文件位置：node_modules/lib-flexible/flexible.js 第69行的refreshRem方法

if (width / dpr < 1980) {
            width = 1980 * dpr;
        } else if (width / dpr > 5760) {
            width = 5760 * dpr;
        }