可视化大屏自适应效果

通过transform的缩放效果 让真实宽高和现实的浏览器窗口大小进行等比例缩放

1.HTML

:style="{width: windowWidth+'px',height:windowHeight+'px',transform:'scale('+realWidth/windowWidth +','+realHeight/windowHeight +')'}"

2.获取浏览器窗口大小

this.screenWidth = document.body.clientWidth;

    this.screenHeight = document.body.clientHeight;

    window.onresize = () => {

      return (() => {

        this.realWidth = document.documentElement.clientWidth;

        this.realHeight = document.documentElement.clientHeight;

      })();

    };