根據 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}");
                  }
              }
          },