大屏项目开发，等比缩放

在开发大屏项目的时候，有多种方式进行开发

比如：

• 1.使用rem等类似的自适应单位进行开发，开发效率较高，不用单独处理其他适配；但是在PC端进行屏幕缩放的时候会存在问题
• 2.使用多媒体查询，对多个屏幕阶段进行适配特定的css文件，这种可操作性最高，最完美，但是工作量比较多
• 3.使用css3 transform:scale()，进行缩放，通过resize监测屏幕可视度宽度

暂时用了第三种方式，写一个共用的方法

// 导出resize方法
export function resize(id){
  let docWidth = document.documentElement.clientWidth;
  let docHeight = document.documentElement.clientHeight; // 当前浏览器可视范围高度
  let container = document.getElementById(id);
  let emptyHeight = container.getBoundingClientRect().height; // 被缩放后的盒子高度(这个高度可能是窗口还原(变化)前的高度不够准确)
  let centerTopNumber = docHeight - emptyHeight > 0 ? (docHeight-emptyHeight)/2 : 0; // 计算当前元素是否占满可视范围，如果占满定位从0开始
  var designWidth = 1920,
      designHeight = 1080,
      widthRatio = docWidth / designWidth;
      // heightRatio = docHeight / designHeight;
      container.style=`transform:scale(${widthRatio}) translate3d(0%,0%,0);transform-origin:left top;position:absolute;top:${centerTopNumber}px;`;
  setTimeout(function(){
      var lateWidth= document.documentElement.clientWidth,
        lateHeight = document.documentElement.clientHeight;
      let emptyHeight2 = container.getBoundingClientRect().height; // 被缩放后的盒子高度(这个高度能够准确知道窗口变化后的高度)
      let centerTopNumber2 = lateHeight - emptyHeight2 > 0 ? (lateHeight-emptyHeight2)/2 : 0; // 计算当前元素是否占满可视范围，如果占满定位从0开始，如果没占满就取空白位置的1/2
      // if(lateWidth===docWidth) return;
      widthRatio = lateWidth/ designWidth;
      // heightRatio = lateHeight/ designHeight
      container.style = "transform:scale(" + widthRatio + ") translate3d(0%,0%,0);transform-origin:left top;position:absolute;top:"+centerTopNumber2+"px;"
  },0);
}