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

今天給大家分享一下，修真院官網css任務13，深度思考中的知識點——移動端有哪些常見布局方式？

1.背景介紹

隨著智慧型手機的普及以及社會的發展，傳統的**布局已經無法適應現狀，我們編寫的網頁不僅僅要展示在電腦上，也要展示在移動裝置上，而移動裝置種類繁多，蘋果、小公尺、三星等等，各個手機的螢幕大小不一，一般的電腦端的頁面布局在手機上無法完全適應，那麼如何讓乙個頁面匹配各個頁面呢？現在我們來看看下面的幾種布局方式。

2.知識剖析

1>.固定布局

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

演示demo

2>.流動布局

流動布局與固定寬度布局基本不同點就在於對**尺寸的測量單位不同，流動布局就是使用百分比來代替px作為單位。優點是流動布局可以很好解決自適應需求。缺點是不夠靈活，新增元素時，需要更改其他元素的值。

演示demo

3>.bootstrap布局

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

演示demo

4>.**查詢+rem布局

使用**查詢可以根據不同的裝置寬度載入不同的css樣式。rem是乙個相對單位，會根據根節點的字型大小來計算的，使用**查詢和rem可以實現移動端的響應式。

演示demo

5>.flex布局

flexbox是css3引入的新的布局模式，也稱為彈性布局，他會根據頁面的剩餘寬度自動分配空間。它決定了元素如何在頁面上排列，使它們能在不同的螢幕尺寸和裝置下可**地展現出來。它能夠擴充套件和收縮 flex 容器內的元素，以最大限度地填充可用空間。flexbox布局最適合應用程式的元件和小規模的布局，而網格布局更適合那些更大規模的布局。

演示demo

3.常見問題

移動端字型單位font-size選擇px還是rem?

4.解決方案

由於手機螢幕較小，且各種螢幕尺寸不同，會導致單位字型變化，顯得格格不入。移動端的字型選擇。對於只需要適配手機裝置，使用px即可。對於需要適配各種移動裝置，例如需要適配iphone和ipad等解析度差別比較挺大的裝置，就要使用rem了，有時還需要配合**查詢一起使用。

5.編碼實戰

見dome裡。

6.擴充套件思考

移動端和pc端的區別？

（1）pc考慮的是瀏覽器的相容性，而移動端開發考慮的更多的是手機相容性，因為目前不管是android手機還是ios手機，一般瀏覽器使用的都是webkit核心，所以說做移動端開發，更多考慮的應該是手機解析度的適配，和不同作業系統的略微差異化。

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

（3）在布局上，移動端開發一般是要做到布局自適應的，我使用的一直是rem布局，感覺很好。

（4）在動畫處理上，pc端由於要考慮ie的相容性，所以通常使用js做動畫的通用性會更好一些，但是css3做了很大的犧牲，而在手機端，如果要做一些動畫、特效等，第一選擇肯定是css3，既簡單、效率又高。

（5）一般pc端用jquery，移動端用zepto，因為移動端的流量還是比較重要的，所以引入的資源或者外掛程式，能小則小，乙個30k的資源和乙個80k的資源，在移動端的差別還是挺大的。

7.參考文獻

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

參考二：**前端移動端頁面開發（布局篇）

參考三：10分鐘學會基本的 flexbox 布局

8.更多討論

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

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

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

ppt感謝葉紫陽師兄和王姝麗學姐，此教程是在他們之前技術分享的基礎上完善而成。

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

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

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

移動端常見布局方式

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

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

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

移動端常見布局方式

相關推薦