大屏适配方案

691 阅读1分钟

js部分

function resetScreenSize (dw, dh) {
    let init = ()=> {
        let _el = document.getElementById('app');
        let contentZoom = Math.min(
            window.innerWidth / dw,
            window.innerHeight / dh
        );
        _el.style.transform = `scale(${contentZoom})`
    }
    let lazyFun;
    //窗口大小发生改变时自动调整
    window.onresize = ()=> {
        clearTimeout(lazyFun);
        lazyFun = setTimeout(()=> {
            init()
        }, 600)
    }
    init()
}

css部分

.container{
      height: 100vh;
      width: 100vw;
      background: #051834;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      .main{
          height: 1080px;
          width: 1920px;
      }
  }