解决页面等比缩放问题

        近些年可视化数据大屏技术早已成熟，在市场上相关技术也是五花八门；通常情况是自行开发，要不找技术比较成熟大厂定制，或者使用较成熟的低代码平台实现。

        技术门槛比较低，不过在数据大屏项目实施过程中会发现，需要调整屏幕分辨率，页面大小自适应，字体大小等问题；由于网页中最小字段12px，内容过多时通常样式控制非常麻烦；此篇将使用CSS3新特性transform技术，来实现分辨率变化后，还可以正常显示页面。

        对transform技术不了解朋友，可以查看文档地址：CSS transform 属性

        由于近期工作较忙，这里将就简单写个页面来演示其效果，如下图：

         如上图，是在1920*1080分辨率下开发出来的页面，刚好是满屏展示。但是在具体实施中，由于大屏宽高不统一，或宽度过宽等问题，导致页面不能正常显示。如下图，将分辨率改为8000*3200，则内容显示非常小。

        

一、页面开发

1.1  Item页面

1.2 内容页面

        这里样式太基础，大家自行发挥吧。页面开发完成后，F12打开控制台，在Responsive中调整模拟长屏显示效果，则会发现页面不会跟随页面自适应，下面我们将讲解如何解决此问题。

二、等比缩放

        首先在home-container节点上添加style样式，并将在data中命名样式属性，代码如下：

        此时页面样式如下图：

         如上图，页面内容已明显比之前大了一倍，那如何自动计算出放大倍数呢？这里则在页面加载时，计算出倍数，公式为当前页面实际宽高 除以开发页面宽(1920px)和高(1080px)，代码如下：

         此时页面效果如下：

         但是现在页面看上去有点变形，失真效果。这是页面8000*3200和1920*1080不是等比原因；如果希望页面能够正常展示，可以以宽度的比例进行缩放，也可以通过高度比例。

        以下通过高度比例等比缩放，代码如下：

 

        以高度比例进行缩放好处是，在宽度中内容可以一屏展示出来，但不足的是如果宽度不够，两边会留下许多空白区域，这可根据实现需求来进行处理。

        这里添加styleType变量，用于灵活调节不同展示效果。

        当然变量里参数也可以根据实际情况进行调整，调整后会有不同效果。例如上面最后是以高度比例进行缩放的，但是如果需要通过宽度比例，有些大屏上下内容则会被遮挡住部分，如下图：

        如何解决以上问题呢？这里将position属性改为absolute，top属性改为0，translate的Y轴方向也要改为0，代码如下：

        此时页面以宽度比例进行缩放效果，由于高度不够，所以需要看到下面内容，需要进行鼠标滚动。如下图：