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

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

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

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

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

        

一、页面开发

1.1  Item页面

<template><div class="list-item-box"><div class="item-title"><h3>{{title}}</h3></div><div class="item-content"><slot></slot></div></div>
</template><script>
export default {name: 'ItemBox',props: {title: {type: String,default: () => "标题"}}
}	
</script><style lang="scss" scoped>
@import "./index.scss";	
</style>

1.2 内容页面

<template><div class="home-container"><div class="table-wrap"><div class="list-item"><ItemBox title="uni-app"><p>uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。</p><p>DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（详见），腾讯课堂官方为uni-app录制培训课程（详见），开发者可以放心选择。</p><p>uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架（详见）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。</p></ItemBox></div><div class="list-item"><ItemBox title="小程序"><p>小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。</p></ItemBox></div></div><div class="table-wrap"><div class="list-item"><ItemBox title="Java"><p>Java 是一个通用术语，用于表示 Java 软件及其组件，包括“Java 运行时环境 (JRE)”、“Java 虚拟机 (JVM)”以及“插件”。</p><p>Java具有大部分编程语言所共有的一些特征，被特意设计用于互联网的分布式环境。Java具有类似于C++语言的形式和感觉，但它要比C++语言更易于使用，而且在编程时彻底采用了一种以对象为导向的方式。</p><p>Java版本指的是 Java 系列和更新编号。示例：在网站上或者 Windows 程序中，版本显示为 Java 8 Update 25。旧版本也可显示为 1.7.0_65，这表示 Java 7 Update 65。</p></ItemBox></div><div class="list-item"><ItemBox title="C#"><p>C# 是一个现代的、通用的、面向对象的编程语言，它是由微软（Microsoft）开发的，由 Ecma 和 ISO 核准认可的。</p><p>C# 是由 Anders Hejlsberg 和他的团队在 .Net 框架开发期间开发的。</p><p>C# 是专为公共语言基础结构（CLI）设计的。CLI 由可执行代码和运行时环境组成，允许在不同的计算机平台和体系结构上使用各种高级语言。</p></ItemBox></div></div><div class="table-wrap"><div class="list-item"><ItemBox title="PHP"><p>PHP（PHP: Hypertext Preprocessor）即“超文本预处理器”，是在服务器端执行的脚本语言，尤其适用于Web开发并可嵌入HTML中。PHP语法学习了C语言，吸纳Java和Perl多个语言的特色发展出自己的特色语法，并根据它们的长项持续改进提升自己，例如java的面向对象编程，该语言当初创建的主要目标是让开发人员快速编写出优质的web网站。 [1-2]PHP同时支持面向对象和面向过程的开发，使用上非常灵活。</p></ItemBox></div><div class="list-item"><ItemBox title="NodeJs"><p>Node.js发布于2009年5月，由Ryan Dahl开发，是一个基于Chrome V8引擎的JavaScript运行环境，使用了一个事件驱动、非阻塞式I/O模型， [1] 让JavaScript 运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。</p><p>Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好，V8引擎执行Javascript的速度非常快，性能非常好，基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。</p></ItemBox></div></div></div>
</template><script>
import ItemBox from '../ItemBox/index.vue'export default {name: 'Home',components: {ItemBox}
}
</script><style lang="scss" scoped>
@import "./index.scss";	
</style>

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

二、等比缩放

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

<template><div class="home-container" :style="ContainerStyle"><div class="table-wrap"><!-- ... 略 --></div></div>
</template><script>
import ItemBox from '../ItemBox/index.vue'export default {name: 'Home',components: {ItemBox},data(){return {ContainerStyle: {position: "fixed",left: "50%",top: "50%","transform-origin": "0 0",transform: "scaleX(2) scaleY(2) translate(-50%, -50%)"}}}
}
</script>

        此时页面样式如下图：

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

<script>
import ItemBox from '../ItemBox/index.vue'export default {name: 'Home',components: {ItemBox},data(){return {ContainerStyle: {position: "fixed",left: "50%",top: "50%","transform-origin": "0 0",transform: "scaleX(2) scaleY(2) translate(-50%, -50%)"}}},mounted() {this.initialPage();},methods: {initialPage(){const w = window.innerWidth / 1920;const h = window.innerHeight / 1080;this.ContainerStyle.transform = `scaleX(${w}) scaleY(${h}) translate(-50%, -50%)`;}}
}
</script>

         此时页面效果如下：

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

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

<script>
import ItemBox from '../ItemBox/index.vue'export default {name: 'Home',components: {ItemBox},data(){return {ContainerStyle: {position: "fixed",left: "50%",top: "50%","transform-origin": "0 0",transform: "scaleX(2) scaleY(2) translate(-50%, -50%)"},styleType: 3}},mounted() {this.initialPage();},methods: {initialPage(){const w = window.innerWidth / 1920;const h = window.innerHeight / 1080;switch(this.styleType){// 宽和高同时缩放case 1: this.ContainerStyle.transform = `scaleX(${w}) scaleY(${h}) translate(-50%, -50%)`; break;// 以宽度比例等比缩放case 2: this.ContainerStyle.transform = `scale(${w}) translate(-50%, -50%)`; break;// 以高度比例等比缩放case 3: this.ContainerStyle.transform = `scale(${h}) translate(-50%, -50%)`; break;}}}
}
</script>

 

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

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

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

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

<script>
import ItemBox from '../ItemBox/index.vue'export default {name: 'Home',components: {ItemBox},data(){return {ContainerStyle: {position: "fixed",left: "50%",top: "50%","transform-origin": "0 0",transform: "scaleX(1) scaleY(1) translate(-50%, -50%)"},styleType: 2}},mounted() {this.initialPage();},methods: {initialPage(){const w = window.innerWidth / 1920;const h = window.innerHeight / 1080;switch(this.styleType){// 宽和高同时缩放case 1: this.ContainerStyle.transform = `scaleX(${w}) scaleY(${h}) translate(-50%, -50%)`; break;// 以宽度比例等比缩放case 2: this.ContainerStyle.position = "absolute";this.ContainerStyle.top = 0;this.ContainerStyle.transform = `scale(${w}) translate(-50%, 0)`; break;// 以高度比例等比缩放case 3: this.ContainerStyle.transform = `scale(${h}) translate(-50%, -50%)`; break;}}}
}
</script>

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