VUE cli 电脑端配置屏幕自适应

如何在用VUE cli 处理PC端rem自适应

1. 安装npm i lib-flexible --save-dev

2. 安装npm i px2rem-loader --save-dev

3.在main.js 中引入 lib-flexible

import "lib-flexible"

4.build/until.js　文件里找到 exports.cssLoaders ，插入以下代码

const px2remLoader = {
  loader: "px2rem-loader",
  options: {
    remUnit: 75
  }
};

其中75是设计稿/10 得到的。根据设计稿的值更改。

5.继续找到 generateLoaders 函数 找到以下代码

const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader];

将px2remLoader插入到数组中

const loaders = options.usePostCSS
  ? [cssLoader, postcssLoader, px2remLoader]
  : [cssLoader, px2remLoader];

然后将项目重新跑一下， 可以看出项目的PC端还是错的，是因为我们还需要在别的地方改变一下我们的配置。

6.我们需要找到flexible.js 文件

在node_module下找到lib-flexible文件中的flexible.js

function refreshRem() {
    var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 540) {
      width = width * dpr;
    }
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
  }