參考大屏設(shè)計器網(wǎng)站的設(shè)計思路：

http://gcpaas.gccloud.com/bigScreen/bigscreen/preview?code=bigScreen_x1l3MlbPZq

• 設(shè)計思路：
  1、首先大屏標準尺寸為1920px*1080px尺寸驚醒設(shè)計和開發(fā)
  2、獲取當前屏幕的寬高，計算出當前屏幕寬高分別縮放比，拿取縮放比更小的一組數(shù)據(jù)，作為整體根元素的縮放比例

const docEl = document.documentElement;
  //獲取到rem的基準值
  const width = docEl.clientWidth;
  const height = docEl.clientHeight;
  const scale = width / 1920
  const scale1 = height / 1080
  const scales = scale > scale1 ? scale1 : scale

3、防抖監(jiān)聽頁面的縮放，重新計算根元素的縮放比

window.addEventListener('resize', debounce(setRemUnit, 800))

防抖函數(shù)

function debounce (fn, ms) {
  let timer = null
  return () => {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(function() {
      fn();
    }, ms);
  };
}

4、通過transform中的scale屬性對根元素進行縮放

appContainer.style=`transform:translate(-50%,-50%) scale(${scales});`

• 以下是完整代碼(Vue3語法)
  文件setScreenSize.js為完整的代碼，并且在mian.js中引入即可完成屏幕自適應(yīng)

import { nextTick } from 'vue'

export async function setRemUnit () {
  console.log('計算根元素')
  const docEl = document.documentElement;
  //獲取到rem的基準值
  const width = docEl.clientWidth;
  const height = docEl.clientHeight;
  const scale = width / 1920
  const scale1 = height / 1080
  const scales = scale > scale1 ? scale1 : scale

  await nextTick()
  const appContainer = document.getElementById('appContainer')
  appContainer.style = `transform:translate(-50%,-50%) scale(${ scales });`

}

setRemUnit()

//頁面縮放防抖改變頁面大小
window.addEventListener('resize', debounce(setRemUnit, 300))


function debounce (fn, ms) {
  let timer = null
  return () => {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(function() {
      fn();
    }, ms);
  };
}