06-数据可视化-大屏适配.pdfVIP

数据可视化大屏适配

刘军liujun

目录

content1认识大屏设备

2大屏适配方案

3开发注意事项

4大屏项目实战

coderwhy认识大屏

◼在开发网页时，我适配最多的屏幕尺寸是：

PC端电脑：1920px*1080px（当然也有少部分电脑是支持输出4k屏，比如：小米笔记本等）

移动设备：750px*auto

◼那什么是大屏设备

在我们的生活中，经常会见到一些比较大的屏幕，比如：指挥大厅、展厅、展会中的大屏。这些设备就可以称之为大屏设备，

当然1920*1080和3840*2160（4k屏）也可以说是属于大屏。

◼大屏的应用场景

通常用在数据可视化，借助于图形化手段，清晰有效地传达与沟通信息

✓比如用在：零售、物流、电力、水利、环保、交通、医疗等领域。

◼大屏的硬件设备的分类：

拼接屏、LED屏、投影等。

coderwhy大屏设备-拼接屏

◼拼接屏

顾名思义就是很多屏幕按照一定拼接方式拼接而成。

✓其实可以理解成是由很多电视（显示屏）拼接而成。

✓常见的使用场景有指挥大厅、展厅、展会等等。

◼拼接方式取决于使用场景的需求，如下例子：

1920px*1080px，即1*1个显示屏（16:9）

3840*2160（4k屏），即2*2个显示屏（16:9）

5760*3240，即3*3个显示屏（16:9）

7680*3240，即4*3个显示屏（64:27）

9600*3240，即5*3个显示屏（80:27）

coderwhy大屏设备-LED屏

◼LED屏

LED也是现在大屏中常用的硬件，它是由若干单体屏幕模块组成的，它的像素点计算及拼接方式与拼接屏有很大区别。

LED可以看成是矩形点阵，具体拼接方式也会根据现场实际情况有所不同，拼接方式的不同直接影响到设计的尺寸规则。

LED屏有很多规格，各规格计算方法相同。

✓比如，我们用单体为500*500的作为标准计算，每个单体模块像素点横竖都为128px

✓如右图，横向12块竖向6块，横向像素为128*12=1536px，竖向128*6=768px。可以使用横竖总像素去设计。

✓最终算出的屏幕尺寸：1536px*768px

coderwhy定设计稿尺寸-拼接屏

◼拼接屏

大多数屏幕分辨率是1920*1080。当然也会有一些大屏，比如6*3的拼接屏，横向分辨率为6*1920=11520px。竖向分辨率为

3*1080=3240px。设计可以按照横竖计算后的总和（11520px*3240px）作为设计尺寸。

这种尺寸过大的就不太适合按原尺寸设计，那怎么判断什么时候可以按照总和设计，什么时候最好不要按照总和设计。这有一个关键

的节点4K，超过4K后现有硬件会产生很多问题，例如：卡顿，GPU压力过大，高负荷运行等等。

正常设计建议最好是保持在4K内，由于硬件问题，所以现在大家采用的都是输出4K及以下，既保证流畅度又能在视觉上清晰阅读。

所以设计时也要保持同样的规则。保持大屏的比例等比缩放即可。

注：最好是按照硬件的输出分辨率设计（关键），因为按照输出分辨率设计，一定不会出错。

◼比如

1920px*1080px（1*1），设计搞尺寸：1920px*1080px。

3840*2160（2*24k屏），设计搞尺寸：3840*2160。

5760*3240（3*3），设计搞尺寸：576