现状
现在最流行的大屏自适应手法： scale缩放
为了解决2d/3d的点击交互问题，通常设计成了2个层容器。图表层和2d/3d层。图表层负责缩放，2d/3d层保持100%显示，避免缩放引起的交互事件event问题。
下图是一个1920*1080的大屏示意图
使用常规的缩放方法，让大屏在窗口内最大化显示。大屏在不同的窗口中出现了空白区域，并没有充满整个屏幕。
新的方法
在缩放的基础上，对指定的要素进行贴边处理。我们希望上下吸附到窗口最上面和最下面。左右图表吸附到窗口的最左边和最右边。
这里面需要简单的计算，其中a是图表层 scale属性
var halftop = (window.innerHeight- (1080*a.scaleY))/2/a.scaleY;
var halfleft = (window.innerWidth- (1920*a.scaleX))/2/a.scaleX;
对指定id的容器，在resize事件中设置上下左右浮动。如下图
实战项目效果
注，下面图片中的数据指标、城市名、姓名、图像均为虚拟数据。
在实际应用中，一般1920*1080设计稿已宽屏为主，如果是竖屏大屏（下图6），需要设计竖屏UI。
你也可以下载该项目demo, 对窗口进行缩放查看效果 pan.baidu.com/s/1hE_C9x9i…
