乐趣区

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

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

比方:

  • 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);
}

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

退出移动版