大屏可视化容器组件开发

页面的缩放不会引起样式的改变（视口的宽高/设计稿给的宽高，scale）

// 在resize事件中，监听这个宽高比比变化
 computedScale() {
      const realWidth = window.document.body.clientWidth
      const realHeight = window.document.body.clientHeight
      // console.log(realWidth, realHeight, '算法')
      // 视口的/设计稿的
      this.dom.style.transform = `scale(${realWidth / this.allWith},${
        realHeight / this.allHeight
      })`
      //  console.log(111)
    },

如果没有传递高度下来，那么使用屏幕的分辨率

window.screen

css代码

#imooc-screen-container {
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  transform-origin: left top;
  z-index: 999;
}