vue3 ts 制作大屏适配rem vue数据大屏适配

最近后台改版，要求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配置稍有区别)

试过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之间是可以进行缩放的。可以根据实际情况去更改。