移動端頁面總結

關于前端移動端頁面開發的總結

從兩種情況來看：

一、單頁面（落地頁之類的）

1.一般都是分為幾個大的子產品，可以延續之前的做法，每個子產品都用一個語義化的ID表示出來，更加便于維護；

2.可以像之前一樣搭好一個大的架構，在架構裡面填内容就可以了；

3.對于字型、顔色等盡量從藍湖中取得，如果沒有那麼最好在寫頁面之前先統一全頁面字型大小、背景顔色等；

4.關于圖檔壓縮的問題，之前都有過幾次這種情況的出現，目前正在尋找更好的方法。

現在的做法是根據螢幕大小（750px為基準），将甲方所給的圖檔按比例進行縮放，如果在适應性問題中出現了圖檔壓縮，采用媒體查詢的方式修正；

5.關于頁面規範的問題：正常情況下html代碼中不要太多css樣式，在寫單頁面中為了快速完成我們一般習慣寫行内樣式，

這種在後期最好是單獨列入style标簽中或者是一個單獨的css檔案，會使得整體代碼更加整潔，結構更加清晰，

還有一種情況是每一個闆塊下單獨寫了一個style标簽放樣式，這種最好是寫在head标簽裡的一個總的style标簽中，更有利于頁面整潔和後期維護；

二、非單頁面（公衆号之類的）
    1.公衆号頁面比較多，一般都可以通過藍湖直接擷取字型、顔色等基本樣式，但是為了适應不同螢幕字型大小，一般通過引入js來控制字型大小，
      在這裡我們将所有的px換算成rem來表示，對于自适應情況更加友好,同樣，這種情況下圖檔壓縮變形問題基本上不會出現；
    2.多頁面一般會分為幾個大的闆塊，我們在對html、css、js命名的時候就可以将其劃分開，團隊開發和維護會更加便捷；
    3.一個頁面一般分為頭部、主體部分和底部三大子產品，在入手的時候可以先把複用性高的頭部和底部子產品寫好，在寫其他頁面時直接引入修改部分内容就可以了；
      主體部分和單頁面一樣，可根據情況先建構好主體架構，再填内容；
    4.多頁面中要用到的架構我們采用的是Vant架構，很多元件都可以直接拿過來用，再根據設計圖改變一些樣式就可以了，這樣可以節省很多時間；