前端大屏頁面布局經驗

額··· 其實談不上經驗，只能說是開發過程中值得記錄一下的東西，不一定是對的。

分辨率

首先一點，大屏對分辨率和顯示器是有要求的，因為他不像一般的頁面，出個縱向的滾動條啥的無所謂，不是特殊情況下，大屏是不能出現滾動條的，所以其實不是隨便一台電腦，隨便一個分別率都可以使用大屏的，目前一般的分別率是 19201080100%的，但是具體得根據設計師設計圖決定，還有，大屏是一般是全屏效果，就是F11電腦全屏，不加上瀏覽器上不標簽欄、地址欄和書簽欄的區域。

Echarts

再一個，大屏開發過程中就會發現，百分之九十的大屏頁面都是展示數據報表，就是各種Echarts柱形圖、折線圖、雷達圖的展示，所以說對於Echarts的使用就得稍微熟練一點，因為大部分的大屏設計師不會把頁面設計的就是echarts官網示例一樣的簡陋樣式，需要開發者根據echarts的配置手冊，盡可能的調試成設計師設計的樣式，配置手冊東西超級多，這個步驟需要花費大部分時間，碰到難一點的，一個echarts調半天也是可能的，好在弄得多了，有些地方就記住了，后來也就慢慢的快了。如果沒有做過或者是接觸過，一時間很難找到該使用哪個屬性配置樣式，這個時候就不要瞎找了，抓緊時間百度，形容一下想要的樣子，就很容易找到，要相信，像我們這種初學者很多，肯定又問在網上提問的人也很多，但是百度到的大部分不可能和我們需要的一模一樣，不要上來就罵，根據別人的資料，修改成自己需要的，也是一種能力。

布局

第三一個，布局。這個是大屏開發中最煩的事情，盡管是根據固定的分辨率開發調試，但是畢竟實際情況可能根據電腦不同需要稍微的適配，保證在近似的分辨率下展示效果是正常的，不至於很錯版。

在開發的時候建議哈，僅僅是建議，建議使用彈性布局、使用百分比設置寬高之類的屬性值，盡可能的減少px的使用，因為像素不一樣，px的大小也不一樣，極容易出現錯版的問題，但是可以使用rem、em之類的，推薦rem。

還有一點，我們在開發大屏的時候如果用到echarts，它里面的一些東西比如說字體大小設置的數值就是px，默認就是px，這個就不太好搞，我們需要定義一個方法，然后把px轉成rem對應的值，效果會好一些，這些代碼不需要自己寫，網上百度就可以，案例有很多，只要看得懂，會用就行，當然用了之后研究一下更好，不過話又說回來，能用起來其實已經會了。

模塊化

因為我是用vue開發的大屏，模塊化是必不可少的，不要在一個文件里面填充太多的東西，我們可以把每一小部分單獨拆出來，封裝好，然后引用到對應的位置，不要把一個頁面填充到上千行，不方便閱讀，也不容易維護，那句話怎么說的來着，“我寫的代碼，只有我和瀏覽器能看懂，但是一星期以后，只有瀏覽器能看懂。” 不要出現這么尷尬的局面，該加注釋的地方加注釋，文件命名易懂又好區分。模塊化之后第一個原因是方便維護，第二一個原因是可以組件復用，比如說echarts，頁面上有好多相同的柱形圖，一摸一樣，只是渲染的數據不一樣，那就可以封裝一個柱形圖組件，組件復用就可以，就是類似的道理。