VUE之PC大屏适配

PC屏幕适配主要使用两个插件：

1、postcss-plugin-px2rem：用于将项目中的px自动转换成ren；

2、lib-flexible：用于针对不同屏幕进行适配；

lib-flexble：

lib-flexible会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px。

使用步骤：

1、安装 lib-flexible

npm i lib-flexible

2、引入 lib-flexible

在main.js中引入lib-flexible

import 'lib-flexible'

2.1、lib-flexble 默认是用来做移动端适配的，如果做PC适配，我们需要对源码进行修改

打开./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这个特定值的时候，那么就不再进行适配了。

2.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;
}

最小范围可根据项目来设置，如果最小适配范围是320，此处就设置为320；如果不设置最大适配范围，则修改源码如下：

function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        // 此处的最小范围可根据实际情况来设置
        if (width / dpr < 320) {
            width = 320 * dpr;
        } else {
            // 不限制最大适配范围
            width = width * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
}

3、安装 postcss-plugin-px2rem

npm i postcss-plugin-px2rem

4、配置 postcss-plugin-px2rem

分两种情况：

• vue-cli 2.x
• vue-cli 3.x

4.1、vue-cli 2.x 配置

1、在build/utils.js中，找到exports.cssLoaders，作出如下修改：

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
        remUint: 75 // 以设计稿750为例， 750 / 10 = 75
    }
}

2、继续找到generateLoaders中的loaders配置，作出如下配置：

// 注释掉这一行
// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
// 修改为
const loaders = [cssLoader, px2remLoader]
 
if (options.usePostCSS) {
  loaders.push(postcssLoader)
}

3、重启项目 npm run dev，完成，页面正常写px即可，UI量出来多少px，页面就写多少px。

4.2、vue-cli 3.x 配置

由于3.x版本需要自己配置，在项目根目录新建文件vue.config.js，然后如下配置：(具体的也可以看官方配置介绍)

module.exports = {
    css: {
    　loaderOptions: {
        postcss: {
          plugins: [
            require('postcss-plugin-px2rem')({
              rootValue: 192, // 以设计稿 1920 为例，1920 / 10 = 192；换算基数，默认100，此处需要根据设计稿的尺寸来设置，始终设置为设计稿的十分之一，这样页面就会页面展示尺寸
              // unitPrecision: 5, //允许REM单位增长到的十进制数字。
              //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
              // propBlackList: [], //黑名单
              exclude: /(node_module)/,  //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
              // selectorBlackList: [], //要忽略并保留为px的选择器
              // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
              // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
              mediaQuery: false,  //（布尔值）允许在媒体查询中转换px。
              minPixelValue: 0 //设置要替换的最小像素值(3px会被转rem)。 默认 0
            }),
          ]
        }
      }
    }
}

重启项目 npm run serve，完成，页面正常写px即可，UI量出来多少px，页面就写多少px。

重点：

至此，PC适配已经完成，但是有个问题，因为修改的是 ode_modules 里面的文件，如果重新执行 npm i 以后，修改的源码就会丢失，需要重新修改；

如果是多人开发一个项目，那在某个电脑上修改了，别人电脑上 npm i 安装完包还是没有你修改后的源码；

所以，建议将修改后的 lib-flexble.js 文件复制一份到本地，可以放在 utils 文件夹下，然后将 main.js 的引用方式也修改了  import 'lib-flexible'  修改为 import '@/utils/lib-flexible'

总结一下：

1、将修改后的 lib-flex.js 复制到本地引用

2、修改 main.js 中的引入方式

现在，可以撸起袖子加油干了！！！！！