屏幕自適應方案

一、屏幕自適應方案

  1. @media screen、%、vw vh、柵格、rem、scale縮放；

二、業務場景

  1. 電腦、平板、手機三種設備自適應：

    建議：

    1. 做三個站點，在前端或者nginx重定向到對應的站點；

  2. 大屏自適應：

    建議：

    1. rem（%、vw vh、柵格、px、flex混合使用）;

    2. scale縮放；

三、scale縮放實現

/**
    html部分
 */
 <template>
     <div className="screen-wrapper">
        <div className="screen" id="screen">

        </div>
     </div>
 </template>

 /*
    CSS部分  --除了設計稿的寬高是根據您自己的設計稿決定以外，其他複製粘貼就完事
  */  
<style>
.screen-wrapper {
    height: 100%;
    width: 100%;
    .screen {
        display: inline-block;
        width: 1920px;  //設計稿的寬度
        height: 960px;  //設計稿的高度
        transform-origin: 0 0;
        position: absolute;
        left: 50%;
     }
}
<style>
       
 /**
    js部分
 */
    onMounted(()=> {
      //初始化自適應  ----在剛顯示的時候適配一次
      handleScreenAuto();
      //綁定自適應函數  ---窗口變化後適配
      window.onresize = () => handleScreenAuto();
    })
    
    onUnmounted(()=> {
      //組件卸載後取消自適應事件
      window.onresize = null;
    })
    
    //數據大屏自適應函數
    function handleScreenAuto() {
      const designDraftWidth = 1920;//設計稿的寬度
      const designDraftHeight = 960;//設計稿的高度
      //根據屏幕的變化適配的比例
      const scale = document.documentElement.clientWidth/document.documentElement.clientHeight < designDraftWidth/designDraftHeight ?
        (document.documentElement.clientWidth/designDraftWidth) :
        (document.documentElement.clientHeight/designDraftHeight);
      //縮放後居中顯示
      document.querySelector('#screen').style.transform = `scale(${scale}) translate(-50%)`;
    }