移動端有哪些常見布局方式？
一、固定布局
固定布局是第一次做移動端時最好的選擇方式,思路沿用PC端,上手比較快。在標簽裏把 viewport 加好,然後設想整個網頁的寬度為 320px 即可。 其他地方根據 PC 端來布局。 缺點:大屏手機顯示網頁比較寬,固定布局寬度參照永遠是 320px,導致左右兩 邊會有空白。
二、流動布局
流動布局與固定寬度布局基本不同點就在於對網站尺寸的測量單位不同，流動布局就是使用百分比來代替px作為單位。 優點是流動布局可以很好解決自適應需求。缺點是不夠靈活，添加元素時，需要更改其他元素的值。
三、bootstrap布局
bootstrap是一個比較流行的響應式前端框架，利用bootstrap的柵格系統可以實現響應式的移動端布局。柵格系統：Bootstrap中定義了一套響應式的網格系統，其使用方式就是將一個容器劃分成12列，然後通過col-xx-xx的類名控制每一列的占比， 在使用的時候，我們給相應的div設置col-lg-2 col-md-3 col-sm-4 col-xs-6，以此完成布局。
四、媒體查詢+REM布局
使用媒體查詢可以根據不同的設備寬度加載不同的css樣式。rem是一個相對單位，會根據根節點的字體大小來計算的，使用媒體查詢和rem可以實現移動端的響應式。
五、flex布局
Flexbox是CSS3引入的新的布局模式，也稱為彈性布局，他會根據頁面的剩余寬度自動分配空間。 它決定了元素如何在頁面上排列，使它們能在不同的屏幕尺寸和設備下可預測地展現出來。它能夠擴展和收縮 flex 容器內的元素， 以最大限度地填充可用空間。Flexbox布局最適合應用程序的組件和小規模的布局，而網格布局更適合那些更大規模的布局。
六、擴展思考
移動端和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
移動端有哪些常見布局方式？