表單界面的兼容PC手機端解決方案

就當寫一篇隨筆吧~上星期還在作加盟模塊(兼容微信端)，這星期已經加班作快遞掃碼模塊(react+node)，因此我感受只有彈藥備足了才能稍微輕鬆些應對各類需求。實話說在同個部門的大佬面前差距確實大，如何判斷差距呢？個人觀點是一是效率，二是質量。Fe這行，若是給你個需求寫出個怎麼怎麼樣的界面，我以爲任何人學幾個星期確定都會了，可是可否完成一個具備大局觀的界面呢？包括兼容性、自適應，最重要的是擴展性如何呢？(js的封裝、抽離，圖片、css、js的壓縮等等)。部門一些大佬的代碼習慣頗有個性，可是讓人看起來是很是友好的，這是一種功底了~。之後朝這個方向go。

表單界面的兼容PC手機端解決方案

回到正題，上星期開發了個加盟模塊，因爲這項目比較老了，因此前端只用了ejs模板，你們能夠看下該加盟模塊效果(能夠微信上也看看效果或者chrome調成device模式)，內容部分從上往下簡單的由圖片、文字、表單三個部分組成。圖片、文字的兼容手機端比較容易，我就講講表單兼容手機端的思路。

    

作頁面以前最重要的是先理清需求，而後進行思考：用不用框架？用什麼佈局？這樣其實能省大量時間。

我有朋友問我怎麼兼容手機端，我回答大概就rem等控制字體的方案,flex等自適應佈局,媒體元素，最後js控制(歡迎你們補充~)

寫表單，你們可能最經常使用的就是用table了，由於方便，可是table也許是如今最死板的佈局了，雖然也有自適應table佈局方案，可是性能不佳(有興趣的朋友能夠去查查)，而後就是float佈局和flex佈局了，我以爲二者均可以，可是flex佈局是將來的趨勢，能用它就多練練，這樣就大致思路就清晰了。

.franchisee .form {
  display: flex;
  flex-flow: row wrap;
}

flex佈局有不少好玩的屬性，有機會都試一試，不過用了flex佈局後，float屬性就失效了。

這樣佈局寫好後，就用媒體元素media進行微調。

pc:                                                                      wx:

  

@media screen and (max-device-width: 768px){}
@media screen and (max-device-width: 480px){}
@media screen and (max-device-width: 320px){}

我對這3個臨界值進行了小幅度的調整(主要寫了選擇地區的展現樣式)，這裏注意不要太依賴用media寫響應式界面，不然會形成大量的冗餘代碼，將來調整也不是很方便。

ps:測試的時候，手機端選擇意向地區時，會彈出搜狗輸入法，給input價格readonly屬性便可；並對一些冗餘的JS代碼進行了封裝。

關於git

學習git的最好的方式就是進一家開放的的公司(好比阿里系的公司)。

之前一我的學習時接觸add,commit,push最多~，如今git庫裏一些新的命令已成爲個人新的好夥伴，好比git checkout develop, git log, git reset, git rebase，git reset --hard等。不少命令以前也瞭解，可是紙上得來終覺淺，絕知此事要躬行。真的是這樣子有些東西看了一遍不算數，跟着視頻敲一遍也不算數，真的要本身獨立地作過纔算數。

好比像 git checkout develop命令，以及我進公司才知道的每一個產品都有本身的線上環境、生產環境、測試環境，咱們開發的時候不可能直接在master上提交代碼，不然會亂，會出錯，因此要切換到develop分支上進行開發，那假如多我的在develop分支上進行開發，若是每一個人都add,commit後直接push，就會自動產生一條merge記錄，而這不是咱們想要的(不美觀),因此在push以前要執行git rebase;

 

今年打算多看幾本書，寫寫demo，寫寫總結；