屏幕自适应方案

一、屏幕自适应方案

  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%)`;
    }