前言

  相信大多数移动端前端开发者都是用过lib-flexible来作为移动端适配的解决方案。lib-flexible是淘宝项目组开发出来的一个小插件，属于开源项目，可以在各类项目中引入并使用，为移动端的开发者带来了无穷的便利。
  但是，有人提出为什么在屏幕尺寸超出一定分辨率后便不再适配？ 今天针对该问题来尝试给出解决方案。

关于lib-flexible

1. 解读

  lib-flexible会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px。假如量的某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem。但是当分辨率大于某个特定值时，它便不再生效。

2. 移动端适配步骤

  一般而言，lib-flexible并不独立出现，而是搭配px2rem-loader一起做适配方案，目的是自动将css中的px转换成rem。以下为它在vue中的使用。

2.1 安装 lib-flexible

  1. npm install lib-flexible --save-dev

2.2 引入 lib-flexible

在main.js中引入lib-flexible

  1. // px2rem 自适应
  2. import 'lib-flexible'

2.3 安装 postcss-px2rem

  1. npm install postcss-px2rem-exclude --save-dev

2.4 配置 postcss-px2rem

如果是3.x版本。由于3.x版本需要自己配置，在项目根目录新建文件vue.config.js，然后如下配置：

  1. module.exports = {
  2.     css: {
  3.         loaderOptions: {
  4.             css: {},
  5.             postcss: {
  6.                 plugins: [
  7.                     require('postcss-px2rem')({
  8.                         // 以设计稿750为例， 750 / 10 = 75
  9.                         remUnit: 75
  10.                     }),
  11.                 ]
  12.             }
  13.         }
  14.     },
  15. };

或者

  1. module.exports = {
  2.   plugins: {
  3.     autoprefixer: {},
  4.     'postcss-px2rem-exclude': {
  5.       // 添加的代码
  6.       remUnit: 192,
  7.       exclude: /node_modules|folder_name/i // 忽略node_modules目录下的文件
  8.     }
  9.   }
  10. };

然后，重新npm run dev，完成。

3. 大屏怎么办？

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

3.1 找到源码

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

  1. function refreshRem(){
  2.     var width = docEl.getBoundingClientRect().width;
  3.     if (width / dpr > 540) {
  4.         width = 540 * dpr;
  5.     }
  6.     var rem = width / 10;
  7.     docEl.style.fontSize = rem + 'px';
  8.     flexible.rem = win.rem = rem;
  9. }

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

3.2 修改源码

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

  1. function refreshRem(){
  2.     var width = docEl.getBoundingClientRect().width;
  3.     if (width / dpr < 1366) {
  4.         width = width * dpr;
  5.     } else if (width / dpr > 5760) {
  6.         width = 5760 * dpr;
  7.     }
  8.     var rem = width / 10;
  9.     docEl.style.fontSize = rem + 'px';
  10.     flexible.rem = win.rem = rem;
  11. }