極光高階工程師——曾暉騰
前言
在5G技術剛出來，站在風口上的時候，好傢伙，那簡直鋪天蓋地，萬物都可以5G，那時不少前端人都相信5G就是前端的未來。那時剛實習的我是看不懂的，但內心大受震撼，就在想啊，這5G究竟跟前端有啥關係呢？想了半天，晚上是橫豎睡不著，是真睡不著，只能從這字縫間看出來兩個字，“加班”。
哈哈，以上是活躍氣氛的笑話一則，其實下一代的通訊技術對我們的日常生活是會帶來很大的積極影響的。資料大屏也一直在發展，一直在為擺脫華而不實的標籤而努力著，為的就是突出資料的價值這件事。
回到開發中來，假如我們需要實現一款能適配所有螢幕的資料大屏應用要怎麼做呢？我們先來看看幾個實現方案擴充一下思路。
市面上的方案
直接使用width百分比做適配
這種方案需要精確計算出對應百分比的值，通常這個值並不好算，而且很多時候需要給出一個確定的高度。這樣的做法不是說不行，只能說現在已經2021年了，有許多比這個更好的實現方案。
使用@media媒體查詢適配各種螢幕
在剛接觸css3的媒體查詢時就覺得這個屬性太及時了，剛好對應上了移動智慧機的普及，給不同螢幕的適配提供了一個很不錯的解決方案。但媒體查詢中設定的'斷點'是離散的，實際應用中可能會對大屏介面造成一些拉伸，不能按百分百按比例顯示出介面。而且要寫的適配樣式將會很多，有點費手。
使用postcss在打包編譯時將px經過一系列計算轉換成rem來實現適配
這個方案本質上是用到了rem這個相對長度單位的特性，例如頁面根元素的字型大小為16px，那麼這時1rem就等於16px。當然頁面根元素的預設值就是16px，如果我們設定為12px，那麼這時1rem就等於12px。
這個時候我們可以知道，設計稿的高寬是固定的，而螢幕的高寬的會變的。但是我們可以算出設計稿與螢幕的比例。這樣可以推算出以下這個關鍵公式：
實際螢幕顯示的某元素寬度 = (實際螢幕寬度 / 設計稿寬度) * 設計稿中某元素的寬度
在專案配置中，我們將實際螢幕與設計稿的比例應用到頁面根元素中，如果這個比例是1/2即0.5，那麼此時1rem就等於8px，然後在postcss中配置根元素字型大小為8px，這樣在程式碼的開發中，就是直接使用設計稿所標註的尺寸了。
postcss需要如下配置
不過這個方案有個問題，就是雖然能按比例顯示還原設計稿，但螢幕高寬變了怎麼辦？postcss的配置是在打包編譯過程中轉換相關的rem單位的，所以無法應對這種情況。
綜上以上幾種方法有的不夠直觀，有的很難維護，有的無法適配所有的螢幕。那麼有沒有一種方法能很好的解決這一系列問題呢？答案是有的，我們需要結合現實情況對第三中方案作出一些改進，我們先來看看需要實現的效果。
需要實現的效果
能適配所有比例的螢幕
一比一無損還原設計稿，無論是比例還是尺寸
方便維護，最好能直接用設計稿裡標註的數值
分析
要達到這樣的效果，我們需要移除在編譯階段對單位的相關轉換，這樣才能動態去計算相關的轉換。而且有時寬度填滿螢幕的時候，為了保持比例不變，高度不一定等填充滿螢幕的高度，反之高度填滿螢幕的時候，寬度也不一定能填充滿，這些情況都是需要考慮到的。
統一數值轉換
經過上面的鋪墊，不難發現其實頁面根元素的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可互動的資料應用就是另一個話題了。