在开发大屏项目时，开发的方式有很多种。例如：1、使用rem等类似的适配单元进行开发，开发效率高，无需单独处理其他适配；但是在PC端缩放屏幕时会出现问题2.使用多媒体查询将特定的css文件适配到多个屏幕阶段，可操作性最好，最完美，但工作量较大3.使用css3transform:scale()缩放，暂时使用第三种方法通过resize监控屏幕可见宽度，写一个通用方法//exportresizemethodexportfunctionresize(id){letdocWidth=document.documentElement.clientWidth;让docHeight=document.documentElement.clientHeight;//当前浏览器可见范围的高度letcontainer=document.getElementById(id);让emptyHeight=container.getBoundingClientRect().height;//缩放框的高度（这个高度可能是窗口恢复（改变）之前的高度不够准确）letcenterTopNumber=docHeight-emptyHeight>0?(docHeight-emptyHeight)/2:0;//计算当前元素是否占满视觉范围，如果占满则从0开始定位vardesignWidth=1920,designHeight=1080,widthRatio=docWidth/designWidth;//heightRatio=docHeight/designHeight;container.style=`transform:scale(${widthRatio})translate3d(0%,0%,0);transform-origin:lefttop;position:absolute;top:${centerTopNumber}px;`;setTimeout(function(){varlateWidth=document.documentElement.clientWidth,lateHeight=document.documentElement.clientHeight;让emptyHeight2=container.getBoundingClientRect().height;//缩放框的高度（这个高度可以准确知道变化后窗口的高度）letcenterTopNumber2=lateHeight-emptyHeight2>0?(lateHeight-emptyHeight2)/2:0;//计算当前元素是否占据可见范围，如果满了，从0开始定位，如果没满，取空白位置的1/2//if(lateWidth===docWidth)return;widthRatio=lateWidth/designWidth;//heightRatio=lateHeight/designHeightcontainer.style="transform:scale("+widthRatio+")translate3d(0%,0%,0);transform-origin:lefttop;position:absolute;top:"+centerTopNumber2+"像素;"},0);}
