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

        技术门槛比较低，不过在数据大屏项目实施过程中会发现，需要调整屏幕分辨率，页面大小自适应，字体大小等问题；由于网页中最小字段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（响应式）、以及各种小程序（微信/支付宝/百度/ 头条/飞书//快手/钉钉/淘宝）、快应用等多个平台。</p> <p>DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app 插件、70+微信/。阿里小程序工具官方内置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>

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