极光高级工程师——曾辉腾前言5G技术刚刚出来站在风口的时候，我的好家伙，真是应接不暇，万物皆可5G当时很多前端人都认为5G是前端的未来。当时刚实习的我还看不懂，但心里震惊，心想，这5G跟前端有什么关系？想了半天，反正晚上睡不着，实在是睡不着，字里行间只看到两个字，“加班”。哈哈，以上只是活跃气氛的笑话之一。事实上，下一代通信技术将对我们的日常生活产生巨大的积极影响。数据大屏也在不断发展，一直在努力摆脱华而不实的标签，以凸显数据的价值。回到开发上，如果我们需要实现一个可以适配所有屏幕的数据大屏应用呢？下面我们来看几个实施方案，拓展一下思路。市面上的方案都是直接使用宽度百分比进行适配。该解决方案需要准确计算相应百分比的值。通常，这个值不容易计算，很多情况下需要给出一个确定的高度。这并不是说不可能，只能说已经是2021年了，还有很多比这更好的实施方案。使用@media媒体查询适配各种屏幕。刚开始接触css3媒体查询的时候，觉得这个属性来得太及时了。恰好对应了移动智能手机的普及，为不同屏幕的适配提供了很好的解决方案。.但是mediaquery中设置的‘断点’是离散的，在实际应用中可能会造成大屏界面有些拉伸，无法100%比例显示界面。而且还会有很多改编风格要写，有点费力。使用postcss将px经过一系列计算后转换为rem，实现打包编译时的适配。该解决方案本质上使用了相对长度单位rem的特性。比如页面根元素的字体大小是16px，那么1rem就等于16px。当然，页面根元素的默认值是16px。如果我们设置为12px，那么1rem就等于12px。这时候我们可以知道设计稿的高和宽是固定的，但是屏幕的高和宽是会变化的。但是我们可以计算出设计稿与屏幕的比例。这样，可以推导出如下关键公式：项目配置中某元素在实际屏幕上显示的宽度=（实际屏幕宽度/设计稿宽度）*设计稿中某个元素的宽度，我们将实际屏幕与设计稿的比例应用到页面的根元素中，如果比例为1/2或者0.5，那么此时1rem等于8px，然后配置字体大小postcss中的根元素为8px，这样在开发代码的时候，直接按照设计稿标注的尺寸上去。postcss需要配置如下，但是这个方案有个问题，就是设计稿虽然可以按比例显示，但是如果屏幕的高和宽发生变化怎么办？postcss配置在打包编译过程中会转换相关的rem单位，所以无法应对这种情况。综上所述，以上方法有的不够直观，有的难以维护，有的无法适配所有屏幕。那么有没有办法很好的解决这一系列的问题呢？答案是肯定的。我们需要根据实际情况对第三种方案做一些改进。我们先来看看需要达到的效果。需要实现的效果可以适应屏幕的所有比例。一对一无损还原设计稿。无论是规模还是尺寸，都易于维护。最好直接使用设计稿中标注的数值分析。要达到这个效果，我们需要去掉编译阶段的单位的相关转换，这样就可以动态计算相关转换了。而且有时候当width填满屏幕的时候，为了保持比例不变，height也不一定等到填满屏幕的高度。反之，当高度填满屏幕时，宽度不一定填满。这些情况需要考虑。经过上面的铺垫，不难发现页面根元素的fontSize可以直接看成一个比例。观察以下变换。如果比例为1000/2000，即0.5，那么根元素的fontSize设置为0.5px，1rem等于0.5px。这样，如果设计稿中某个元素的大小为2000px，那么我们就可以在代码中将其设置为2000rem。这样实际屏幕上显示的就是2000*0.5=1000px。完美，可以直接使用设计稿的值，虽然写的时候需要改单位。考虑到高度或者宽度没有填满屏幕，我们可以添加一些判断来补充。当高度或宽度没有填满屏幕时，可以用相同的主题色或背景填充空白部分。适配到这里基本就完成了，但是除了还原尺寸比例，相关的动画特效也是很重要的一环。在大屏应用中，svg组件和动画建议尽量使用svg矢量图，这样可以完全避免分辨率问题，而且svg图形在动画特效中也有重要作用。比如下面是一个svg组件中path标签的设置，其中containerBox绑定了onSize事件，这样path就可以根据内容的大小动态调整边框的大小。其中strokeDasharray和strokeDashoffset是控制边框动画的关键。这个动画框的效果比较简单，就是一个镀金效果，高光沿着边框流动。如果是一些复杂的动画，可以使用TimelineLite/TimelineMax等时间线工具来制作。结语到目前为止，编写一个数据大屏应用似乎并不是什么难事。想要达到的效果已经完全实现，开发相关大屏产品时无需担心相关问题。当然，这仅限于2D纯显示大屏应用。如果是3D交互数据应用，那就另当别论了。
