最近后台改版，要求login页适配大小屏幕，超大屏幕（浅浅的记录下）；

实现方案：Vue +lib-flexible实现大小屏幕，超大屏幕的适配展示。lib-flexible是淘宝项目组开发的插件，属于开源项目，可以在各种项目（vue，react）中引入并使用，利于其将px转成rem的单位转换形式，不需要我们再根据分辨率不同写很多的适配代码。

看其他文档实现步骤：

1、安装lib-flexible

npm install lib-flexible --save-dev

2、 在main.js中引入lib-flexible

import 'lib-flexible/flexible';

3、安装 px2rem-loader

npm install px2rem-loader --save-dev

4、配置 px2rem-loader (vue2.x和vue3.x配置稍有区别)

 参考文档：vue+lib-flexible实现大小屏幕，超大屏幕的适配展示。 - FancyAnnaYL - 博客园

                    VUE大屏适配方案_Donmind29的博客-CSDN博客_vue大屏适配

试过npm i lib-flexible的方式安装，发现并没有生效，也不知道问题出在哪里（哈哈，出现了一样的问题，why???），于是换成了直接在main.js中引入flexible.js实现了

分享目录结构如下：

在src/utils下创建flexible.js（flexible.js内容在后面，可直接复制），

如果是所有页面统一都要适配，在vue项目的main.js中全局引入flexible.js；

如果项目改版，页面很多，全部整改不现实，就在需要用到的地方@import方式引用（这时就只能用rem为单位，要自己把px转成rem，因为安装 px2rem-loader进行配置是全局配置）；

在安装 px2rem-loader后，项目结构中并没有build/utils.js文件，找不到exports.cssLoaders（上面说到的npm i lib-flexible的方式安装，发现并没有生效，有可能是这个原因），第四步配置 px2rem-loader 是在vue.config.js中配置的（由于我是局部引用，就注释了）

 module.exports = {   

    chainWebpack: config => {

        config.module

          .rule("css")

          .test(/\.css$/)

          .oneOf("vue")

          .resourceQuery(/\?vue/)

          .use("px2rem-loader")

          .loader("px2rem-loader")

          .before('postcss-loader')

          .options({

            // 设计稿宽度 / 10

            remUnit: 160

          });

    },

}

安装 px2rem-loader并进行配置，配置好相关内容后，在样式中直接按照设计稿的宽高去写，在窗口缩放时，页面元素就会响应式的变化了，此时就完成了适配。

flexible.js文件内容如下，可直接复制到项目中：

(function(win, lib) {

  var doc = win.document;

  var docEl = doc.documentElement;

  var metaEl = doc.querySelector('meta[name="viewport"]');

  var flexibleEl = doc.querySelector('meta[name="flexible"]');

  var dpr = 0;

  var scale = 0;

  var tid;

  var flexible = lib.flexible || (lib.flexible = {});

  let rem = 0;

  if (metaEl) {

      console.warn('将根据已有的meta标签来设置缩放比例');

      var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);

      if (match) {

          scale = parseFloat(match[1]);

          dpr = parseInt(1 / scale);

      }

  } else if (flexibleEl) {

      var content = flexibleEl.getAttribute('content');

      if (content) {

          var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);

          var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);

          if (initialDpr) {

              dpr = parseFloat(initialDpr[1]);

              scale = parseFloat((1 / dpr).toFixed(2));

          }

          if (maximumDpr) {

              dpr = parseFloat(maximumDpr[1]);

              scale = parseFloat((1 / dpr).toFixed(2));

          }

      }

  }

  if (!dpr && !scale) {

      var isAndroid = win.navigator.appVersion.match(/android/gi);

      var isIPhone = win.navigator.appVersion.match(/iphone/gi);

      var devicePixelRatio = win.devicePixelRatio;

      if (isIPhone) {

          // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案

          if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {

              dpr = 3;

          } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){

              dpr = 2;

          } else {

              dpr = 1;

          }

      } else {

          // 其他设备下，仍旧使用1倍的方案

          dpr = 1;

      }

      scale = 1 / dpr;

  }

  docEl.setAttribute('data-dpr', dpr);

  if (!metaEl) {

      metaEl = doc.createElement('meta');

      metaEl.setAttribute('name', 'viewport');

      metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

      if (docEl.firstElementChild) {

          docEl.firstElementChild.appendChild(metaEl);

      } else {

          var wrap = doc.createElement('div');

          wrap.appendChild(metaEl);

          doc.write(wrap.innerHTML);

      }

  }

  function refreshRem(){

      var width = docEl.getBoundingClientRect().width;

      //根据项目的适配范围设置

      if (width / dpr < 1400) {

          width = 1400 * dpr;

      } else if (width / dpr > 2560) {

          width = 2560 * dpr;

      }

      //根据设计稿宽度设置1rem代表多少像素，

      // rem = (width / 24) ;

      // docEl.style.fontSize = rem + 'px';

      // flexible.rem = win.rem = rem;

      var rem = width / 12;

      docEl.style.fontSize = rem + 'px';

      flexible.rem = win.rem = rem;

  }

  win.addEventListener('resize', function() {

      clearTimeout(tid);

      tid = setTimeout(refreshRem, 300);

  }, false);

  win.addEventListener('pageshow', function(e) {

      if (e.persisted) {

          clearTimeout(tid);

          tid = setTimeout(refreshRem, 300);

      }

  }, false);

  if (doc.readyState === 'complete') {

      doc.body.style.fontSize = 12 * dpr + 'px';

  } else {

      doc.addEventListener('DOMContentLoaded', function(e) {

          doc.body.style.fontSize = 12 * dpr + 'px';

      }, false);

  }

 

  refreshRem();

  flexible.dpr = win.dpr = dpr;

  flexible.refreshRem = refreshRem;

  flexible.rem2px = function(d) {

      var val = parseFloat(d) * this.rem;

      if (typeof d === 'string' && d.match(/rem$/)) {

          val += 'px';

      }

      return val;

  }

  flexible.px2rem = function(d) {

      var val = parseFloat(d) / this.rem;

      if (typeof d === 'string' && d.match(/px$/)) {

          val += 'rem';

      }

      return val;

  }

})(window, window['lib'] || (window['lib'] = {}));

 

与源码有一些修改的地方在：

  function refreshRem(){

      var width = docEl.getBoundingClientRect().width;

      //根据项目的适配范围设置

      if (width / dpr < 1400) {

          width = 1400 * dpr;

      } else if (width / dpr > 2560) {

          width = 2560 * dpr;

      }

      //根据设计稿宽度设置1rem代表多少像素，

      // rem = (width / 24) ;

      // docEl.style.fontSize = rem + 'px';

      // flexible.rem = win.rem = rem;

      var rem = width / 12;

      docEl.style.fontSize = rem + 'px';

      flexible.rem = win.rem = rem;

  }

注意：
1400 - 2560是项目的适配范围，也就是说在窗口可是区大小为1400 - 2560之间是可以进行缩放的。可以根据实际情况去更改。