关于前端:大屏项目开发等比缩放

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

比方：

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

临时用了第三种形式，写一个共用的办法

export function resize(id){  let docWidth = document.documentElement.clientWidth;  let docHeight = document.documentElement.clientHeight;  let container = document.getElementById(id);  var designWidth = 1920,      designHeight = 1080,      widthRatio = docWidth / designWidth,      heightRatio = docHeight / designHeight;      container.style=`transform:scale(${widthRatio},${heightRatio}) translate3d(0,0,0);transform-origin:left top;`;  setTimeout(function(){      var lateWidth= document.documentElement.clientWidth,        lateHeight = document.documentElement.clientHeight;      if(lateWidth===docWidth) return;      widthRatio = lateWidth/ designWidth      heightRatio = lateHeight/ designHeight      container.style = "transform:scale(" + widthRatio + "," + heightRatio + ") translate3d(0,0,0);transform-origin:left top;"  },0);}

这种写法有一个问题，就是高度也进行压缩的话，页面就会变形，能够只压缩宽度