公司大屏開發心得


大屏開發心得

布局篇

因為大屏不是對外開放的,所以可以使用固定的瀏覽器。既然這樣其實是可以使用一些相對比較新的技術的。所以在布局這塊我優先選擇使用flexbox技術。

因為大屏屏幕很大,設計師給出的設計圖通常會有很大的尺寸。其實設計師並不知道的是大屏屏幕在再大,也不過就是一個顯示屏的尺寸。其實那這塊需要的就是一個等比縮放。設計稿通常也就是一個屏幕的大小,也不需要滾動等其他的用戶操作。所以在布局之前需要首先設置的是外框尺寸

html, body {
    height: 100%;
}

大屏首先要把要把這種尺寸的差異解決,這就體現出來flexbox的優勢了。因為只要把量出來設計稿的實際尺寸,直接設置在flex上就可以了。

比如設計稿尺寸是3200px,對應到flex上就是flex: 3200

大屏模糊的問題

大屏一般都是多塊屏幕拼湊起來的一整塊屏。設計稿給的一個頁面。開始的時候我們是按照一個頁面進行開發的。但是投到一個大屏的時候問題來了,因為放的很大,鋸齒很嚴重。

所以后來還是把大屏分開了,設計稿的每個部分拆成一個頁面,每個小屏幕顯示一個頁面。這樣子鋸齒情況就減輕很多。

還解決了一個問題,就是整個屏幕的時候,字體太大。即便字號很小也會顯示很大(chrome默認最小字號是12px,如果需要顯示更小,需要修改瀏覽器配置)。分開就不會有這個問題了


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM