根据 UI 图设计的大小换算rem单位以及大屏页面全屏展示的设置

设置rem节点适配

• 例如设计的UI图尺寸是1366宽的，则正常页面往下滚动的是情况下，输入UI图设计的尺寸，可以是1366，也可以是1920 等；于是就用rem单位适配，根据根节点换算，

• // 初始化
  let self = this;
  window.onload = function() {
      /*1366代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是
  为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
      self.getRem(1366, 100);
  };
  self.getRem(1366, 100);
  window.onresize = function() {
      self.getRem(1366, 100);
  };
  
  
  // 设计rem节点大小，等比例换算
  getRem(pwidth, prem) {
              let html = document.documentElement;
              let oWidth = window.outerWidth ? window.outerWidth : screen.width;
              html.style.fontSize = (oWidth / pwidth) * prem + "px";
          }
   

  CSS:

• <style lang="scss">
  .show {
      display: flex;
      .list {
          flex: 1;
          // UI图宽200px 设置为2rem
          height: 2rem;
          background: #ccc;
          span {
              // 1366 宽情况下的20px 字体，设置为0.2rem
              font-size: 0.2rem;
          }
      }
  }
  </style>

  拓展大屏，考虑竖向情况
  一般大屏情况下，设计师设计的是电脑全尺寸的情况下，例如设计的是1366 * 728 的情况下的大屏
  正常的浏览器和电脑尺寸还包括了下面的Dock栏，浏览器上面的网址栏和菜单栏，剩余的可视化区域就很小了，那么如果大屏的情况下，如果保证设计图竖向也1：1 完整正好一屏显示；
  解决方案：
  高使用vw和百分比的单位；
  全部的高换算成vh或者百分比的单位，需要根据UI图进行进一步的换算百分比
  大屏情况下，设置最小宽高，更小则不再支持缩放，提示用户进来观看大屏使用浏览器全屏模式
   

  <button @click="full">全屏</button>
  <button @click="exit">退出全屏</button>
  
  // 全屏判断
  full() {
              //  指定需要放大全屏div
              let element = document.getElementById("main-warp");
              let requestMethod =
                  element.requestFullScreen || //W3C
                  element.webkitRequestFullScreen || //Chrome等
                  element.mozRequestFullScreen || //FireFox
                  element.msRequestFullScreen; //IE11
              if (requestMethod) {
                  requestMethod.call(element);
              } else if (typeof window.ActiveXObject !== "undefined") {
                  //for Internet Explorer
                  var wscript = new ActiveXObject("WScript.Shell");
                  if (wscript !== null) {
                      wscript.SendKeys("{F11}");
                  }
              }
          },
          
  // 退出全屏
  exit() {
              let exitMethod =
                  document.exitFullscreen || //W3C
                  document.mozCancelFullScreen || //Chrome等
                  document.webkitExitFullscreen || //FireFox
                  document.webkitExitFullscreen; //IE11
              if (exitMethod) {
                  exitMethod.call(document);
              } else if (typeof window.ActiveXObject !== "undefined") {
                  //for Internet Explorer
                  var wscript = new ActiveXObject("WScript.Shell");
                  if (wscript !== null) {
                      wscript.SendKeys("{F11}");
                  }
              }
          },