大屏製作的探索

2021-10-16 22:46:53 字數 696 閱讀 5286

難度其實主要有兩點,第一點如何高質量的還原ui圖,第二點如何寬高自適應。

這個問題對乙個成熟的開發來說其實不大,唯一的問題可能是不同尺寸的裝置上的顯示問題,比如我們在手機端自適應的時候,有1px邊框問題,大屏也會遇到類似的問題,重點排查解決就好了。

寬度自適應,這個很容易,我們對比移動端,有rem,em,百分比等等,高度自適應呢,移動端我們想到了100%巢狀,100vh,但是大屏呢,瀏覽器相容性問題,有沒有乙個方案能解決大部分問題呢。答案是有,下面為大家介紹兩種方案,其實不止是兩種。

這個其實很簡單,利用transform做縮放,具體步驟如下:

這個其實也很簡單,rem只是個中間變數,只是寫入了瀏覽器核心,能被瀏覽器解析罷了。em等等,其實乙個道理。

先來說說rem的原理,假設大屏的ui是1920 * 1080,我們把rem定義為1rem是10px,那麼換算下來,192rem * 108rem,這個時候如果時間的螢幕只有960 * 540,那麼rem的值也會轉換,可以參考手機,rem值會隨著螢幕大小的變化而變化,這樣在960*540的螢幕下,rem變成了5px,完美的解決了問題。

接下來只要使用resize監聽螢幕大小變化,適當修改rem大小就好了,按照換算後的rem大小,來寫大屏ui的寬高。

其實只要是瀏覽器引擎內建的中間單位都可以,而不僅僅是rem,只是rem是常用的。

知難行易,不斷探索新的技術,對老技術溫故而知新,多多研究,才能更加優秀!

大屏模板製作

設計大屏駕駛艙遵循四個基本步驟 布局排版 色彩 點綴效果 動畫。業務部門的需求,是要重點展現集團銷售總額資料以及各地區的資料,其他次要內容包括歷年銷售對比 各產品線銷售 熱門產品 實時交易 新老客戶佔比等。我們從常見的幾種主次分布排版樣式裡挑選了一種作為此次的版面,如下圖所示 由於集團業務遍布全國,...

大屏報表如何製作

在目前的大資料趨勢中,資料的大屏視覺化成為大家所推崇的一種互動展示模式。如果我們能夠早一些了解和掌握這方面的技術,相信對我們的未來將會非常有幫助!我們知道,通過報表工具實現大屏展示可以通過單張報表 多張報表 dashboard 布局或者多張報表頁面布局等方式實現,那麼,如何能設計出優秀的 dashb...

視覺化大屏製作過程 資料視覺化大屏製作的注意事項?

大資料視覺化是以大屏為主要載體的資料視覺化展現。大屏資料視覺化最大的特點就在於讓使用者最直觀地感受複雜的資料,並且通過各種影象 圖形來有效地表達出想要的效果。大屏資料視覺化是以大資料的發展為前提的,而資料視覺化技術又反過來作用於大資料的發展。在一些大型企業中,大多數企業都會選擇大螢幕資料視覺化作為宣...