vue-cli移动端项目自动将px转化为rem(可适配大屏)

1、安装lib-flexible

npm i lib-flexible -D

2、在main.js中引入

import 'lib-flexible/flexible'

3、在index.html文件中设置meta标签:

4、然后在项目中写css时会自动将rem转化为px,需要安装px2rem-loader这个工具

npm i px2rem-loader -D

5、修改配置文件

5.1 vue cli2有build文件夹

/build/util.js：
a、在cssLoader对象下面添加一个px2remLoader对象:

const px2remLoader = {
    loader : 'px2rem-loader',
    options : {
      //这个参数是通过psd设计稿的  宽度 / 10 来计算,这里以750为标准
      remUnit : 75  
    }
  }

b、然后将utils.js文件中的generateLoaders函数的loaders常量改为[cssLoader, px2remLoader]

image

 const loaders = [cssLoader, px2remLoader]

5.2.使用了vue cli3或3以上版本

在项目根目录下新建vue.config.js文件

const cssLoader = {
  loader: 'css-loader',
  options: {
    minimize: process.env.NODE_ENV === 'production',
    sourceMap: options.sourceMap
  }
}
// 新增px2remLoader
const px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    remUnit: 75
  }
}

function generateLoaders (loader, loaderOptions) {
  // 新增px2remLoader
  const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

  if (loader) {
    loaders.push({
      loader: loader + '-loader',
      options: Object.assign({}, loaderOptions, {
        sourceMap: options.sourceMap
      })
    })
  }
}

项目里面直接使用px，UI给的psd是直接写，可自动装换

ps6. 大屏怎么办？

正常情况下，如果是教程，那么到此就结束了。可本文中心是如何在大屏中正常使用lib-flexible。
例如我们屏幕尺寸要做以3840 x 2160为设计稿的适配，那么我们的remUnit的值则改为384。然后呢？重启项目，发现……咦？布局全部乱掉！经过排查，自己的代码基本上不会导致该问题的出现，那么只能是源码在作怪了。重点来了。

6.1 找到源码

打开./node_modules/lib-flexible/flexible.js，找到如下片段源码：

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

从此段源码中我们不难看出，当屏幕宽度除以dpr（dpr是一个倍数，此处一般为1）大于540这个特定值的时候，那么就不再进行适配了。那么我们如何解决这个问题呢？

6.2 修改源码

在上述源码中，进行修改。例如我要适配的大屏幕尺寸是基于3840的设计稿，而要求最小范围是1980，最大为5760，那么我们要修改的则变为：

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

6.3 重启，完成

修改完成后，重启项目，则会适配到相应的尺寸。此外还有一个提示，当脱离掉node_modules重新npm install项目依赖时还是需要重新修改一遍的，千万别忘了！