大屏适配的几种方式

一.计算rem的方式

(function (designWidth, minWidth) {  
    let docEle = document.documentElement  
    let screenRatioByDesign = 16/9  
    function setHtmlFontSize() {  
        let screenRatio = docEle.clientWidth / docEle.clientHeight;  
        let fontSize = ( screenRatio > screenRatioByDesign?(screenRatioByDesign/screenRatio):1) 
        * docEle.clientWidth / 10;
        docEle.style.fontSize = fontSize.toFixed(3) + "px";  
    }
    setHtmlFontSize()
    window.addEventListener('resize', setHtmlFontSize)
})(1920, 1024);

二：使用transform的scale的方式

function resetScreenSize (dw, dh) {
     let init = ()=> {
          let baseWidth = document.documentElement.clientWidth;
          let baseHeight = document.documentElement.clientHeight;
          let appStyle = document.getElementById('app').style;
          let realRatio = baseWidth/baseHeight
          let designRatio = 16/9
          let scaleRate = baseWidth/1920
          if(realRatio>designRatio){
                 scaleRate = baseHeight/1080
           }
          appStyle.transformOrigin = 'left top';
          appStyle.transform=`scale(${scaleRate}) translateX(-50%)`;
          appStyle.width = `${baseWidth/scaleRate}px`
      }

     let lazyFun;
      //窗口大小发生改变时自动调整
       window.onresize = ()=> {
            clearTimeout(lazyFun);
            lazyFun = setTimeout(()=> {
               init()
          }, 600)
      }
     init()
}

三：根据vw,vh,字体通过vh计算

$_designWidth:1920;

$_designHeight:1080;

@function cvh($px) {
  @return  $px/$_designHeight *1080
}
@function cvh($px) {
   @return  $px/$_designWidth *1920
}