大屏适配

277 阅读1分钟

大屏适配

export function resize(id) {
  console.log(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);
}
  mounted () {
    resize('BGhome')
    window.addEventListener(
      'resize',
      function () {
        resize('BGhome')
      },
      false,
    )
  },
  beforeDestroy () {
    window.removeEventListener('resize')
  },