移動端有哪些常見佈局方式？

1、固定佈局

固定佈局是第一次作移動端時最好的選擇方式,思路沿用PC端,上手比較快。在標籤裏把 viewport 加好,而後設想整個網頁的寬度爲 320px 便可。 其餘地方根據 PC 端來佈局。 缺點:大屏手機顯示網頁比較寬,固定佈局寬度參照永遠是 320px,致使左右兩 邊會有空白。

2、流動佈局

流動佈局與固定寬度佈局基本不一樣點就在於對網站尺寸的測量單位不一樣，流動佈局就是使用百分比來代替px做爲單位。 優勢是流動佈局能夠很好解決自適應需求。缺點是不夠靈活，添加元素時，須要更改其餘元素的值。

3、bootstrap佈局

bootstrap是一個比較流行的響應式前端框架，利用bootstrap的柵格系統能夠實現響應式的移動端佈局。柵格系統：Bootstrap中定義了一套響應式的網格系統，其使用方式就是將一個容器劃分紅12列，而後經過col-xx-xx的類名控制每一列的佔比， 在使用的時候，咱們給相應的div設置col-lg-2 col-md-3 col-sm-4 col-xs-6，以此完成佈局。

4、媒體查詢+REM佈局

使用媒體查詢能夠根據不一樣的設備寬度加載不一樣的css樣式。rem是一個相對單位，會根據根節點的字體大小來計算的，使用媒體查詢和rem能夠實現移動端的響應式。

5、flex佈局

Flexbox是CSS3引入的新的佈局模式，也稱爲彈性佈局，他會根據頁面的剩餘寬度自動分配空間。 它決定了元素如何在頁面上排列，使它們能在不一樣的屏幕尺寸和設備下可預測地展示出來。它可以擴展和收縮 flex 容器內的元素， 以最大限度地填充可用空間。Flexbox佈局最適合應用程序的組件和小規模的佈局，而網格佈局更適合那些更大規模的佈局。
6、擴展思考

移動端和PC端的區別？

 （1）PC考慮的是瀏覽器的兼容性，而移動端開發考慮的更多的是手機兼容性，由於目前不論是android手機仍是ios手機，通常瀏覽器使用的都是webkit內核，因此說作移動端開發，更多考慮的應該是手機分辨率的適配，和不一樣操做系統的略微差別化。

 （2）在部分事件的處理上，移動端多出來的事件是觸屏事件，而缺乏的是hover事件。 另外包括移動端彈出的手機鍵盤的處理，這樣的問題在PC端都是遇不到的。

 （3）在佈局上，移動端開發通常是要作到佈局自適應的，我使用的一直是rem佈局，感受很好。

 （4）在動畫處理上，PC端因爲要考慮IE的兼容性，因此一般使用JS作動畫的通用性會更好一些，可是CSS3作了很大的犧牲， 而在手機端，若是要作一些動畫、特效等，第一選擇確定是CSS3， 既簡單、效率又高。

 （5）通常pc端用jquery，移動端用zepto，由於移動端的流量仍是比較重要的， 因此引入的資源或者插件，能小則小，一個30k的資源和一個80k的資源，在移動端的差異仍是挺大的。

 （6）好比在手機上的300ms的延遲，這在PC端是沒有的，若是咱們但願作成webapp，那麼天然就不須要這300ms的延遲，因此可使用hammer-time.js來移除這300ms的延遲。

  7.參考文獻

  參考一： 移動Web開發中的常見佈局方式及一些常見問題

  參考二：淺談前端移動端頁面開發（佈局篇）

  參考三：10分鐘學會基本的 Flexbox 佈局

  8.更多討論

 （1）如何模擬按鈕的hover效果？

 （2）如何在移動端禁止用戶選中內容？

 （3）如何解決移動端click屏幕產生200-300ms的延遲響應問題？

參考文獻：https://blog.csdn.net/nemunemu/article/details/80577902