刚看到一篇文章说“大屏既要不留白，又要不变形，还要没有滚动条。这看似简单的要求，实际却压根不可能，这三个要求在逻辑上是相互矛盾的”。
百度搜了一下几个低代码可视化大屏网站，发现默认适配方式叫自动适配，预览了一下左右居然有留白，这样的自动适配能忍吗。
那不留白+不变形+无滚动条能实现吗，我仔细想了想，如果只对区域模块自适应全屏，里面内容(尤其是文字)固定像素是不是就可以了。
如图所示，不管怎么拉伸窗口，看起来大屏都是正常的。
具体实现：假设低代码的大屏预设为1920*1080px（canvasWidth=1920，canvasHeight=1080）,将大屏拆分为N个模块组件。
1、首先低代码的大屏肯定是用绝对定位实现的，每个组件都有自身的x,y,w,h四个像素属性 （left,top,width,height）。
2、每当初始化或窗口变化时，都能动态的得到页面的宽pageWith和高pageHeight,也就能得到全局的scaleX和scaleY。scaleX=pageWith/canvasWith, scaleY=pageHeight/canvasHeight。
3、将scaleX,和scaleY响应式的应用到每个组件，也就是每个组件的属性值变成了 x·scaleX, y·scaleY， w·scaleX, h·scaleY。
4、组件内部的内容还是保持原来的像素尺寸就实现上图的效果了。
本人的低代码大屏项目用vue3实现的，像pageWith和pageHeight都能通过@vueuse/core的useWindowSize得到响应式的计算值，然后对pageSize({pageWith,pageHeight})进行防抖监听(watchDebounced)就不会影响性能了，其他相关属性也能变成响应的计算值。
