這裡是修真院前端小課堂，每篇分享文從
【移動端有哪些常見的布局方式？ 】
今天給大家分享一下，修真院官網css任務13，深度思考中的知識點——移動端有哪些常見的布局方式？
1.背景介紹
隨著智慧型手機的普及以及社會的發展，傳統的**布局已經無法適應現狀，我們編寫的網頁不僅僅要展示在電腦上，也要展示在移動裝置上，而移動裝置種類繁多，一般的電腦端的頁面布局在手機上無法完全適應，所以在手機端上我們要重新布局。
2.知識剖析
2.1固定布局
固定布局是第一次做移動端時最好的選擇方式,思路沿用pc端,上手比較快。在標籤裡把 viewport 加好,然後設想整個網頁的寬度為 320px 即可。 其他地方根據 pc 端來布局。 缺點:大屏手機顯示網頁比較寬,固定布局寬度參照永遠是 320px,導致左右兩 邊會有空白。
demo
2.2流體布局
流布局與固定寬度布局基本不同點就在於對**尺寸的測量單位不同。固定寬度布局使用的是畫素，但是流布局使用的是百分比，看到百分比，你應該想到，這將提供了很強的可塑性和流動性。換句話說，通過設定了百分比，你將不需要考慮裝置尺寸或者螢幕寬度大小了，結論就是，你可以為每種情形找到一種可行的方案，因為你的設計尺寸將適應所有的裝置尺寸。
demo
2.3flex布局
flex也稱為彈性布局，他會根據頁面的剩餘寬度自動分配空間。
2.4柵格布局
bootstrap是乙個比較流行的響應式前端框架，利用bootstrap的柵格系統可以實現響應式的移動端布局。
3.常見問題
移動端和pc端的區別
4.解決方案
第一： pc考慮的是瀏覽器的相容性，而移動端開發考慮的更多的是手機相容性，因為目前不管是android手機還是ios手機，一般瀏覽器使用的都是webkit核心，所以說做移動端開發，更多考慮的應該是手機解析度的適配，和不同作業系統的略微差異化。
第二： 在部分事件的處理上，移動端多出來的事件是觸屏事件，而缺少的是hover事件。 另外包括移動端彈出的手機鍵盤的處理，這樣的問題在pc端都是遇不到的
第三：在移動端有很多網頁是可以橫屏看也可以豎屏看，並且很多螢幕的餓解析度都是不一樣的，所以只要牽涉到移動端都要考慮用響應式布局
第四： 在動畫處理上，pc端由於要考慮ie的相容性，所以通常使用js做動畫的通用性會更好一些，但是css3做了很大的犧牲， 而在手機端，如果要做一些動畫、特效等，第一選擇是css3， 既簡單、效率又高。
第五：pc端的互動是滑鼠，鍵盤的互動而移動端變成了觸控，手勢的互動
5.編碼實戰
6.擴充套件思考
手機端軟體介面設計中的幾種常用布局樣式
**7.參考文獻
8.更多討論
你們覺得響應式好呢，還是手機和pc端分開來寫？
**9.鳴謝
感謝大家**
by :王姝麗
移動端有哪些常見布局方式？
今天給大家分享一下，修真院官網css任務13，深度思考中的知識點 移動端有哪些常見布局方式？1.背景介紹 隨著智慧型手機的普及以及社會的發展，傳統的 布局已經無法適應現狀，我們編寫的網頁不僅僅要展示在電腦上，也要展示在移動裝置上，而移動裝置種類繁多，蘋果 小公尺 三星等等，各個手機的螢幕大小不一，一...
移動端有哪些常見布局方式？
響應式布局。可以用px作為畫素，網頁進行平鋪。全屏的用100 高度可以用px寫死，寬度可以用百分比。不管網頁怎麼拉伸，高度不變，寬度會相應的擴大。em rem 方式布局。可以設定好html，body的字型大小，然後用不同的尺寸手機訪問的時候，我們可以去修改body的字型大小，網頁 網頁的內容用rem...
移動端常見布局方式
流動布局與固定寬度布局基本不同點就在於對 尺寸的測量單位不同，流動布局就是使用百分比來代替px作為單位。除此之外，流動布局使用浮動，float的好處是，如果寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向overflow 溢位 避免了水平滾動條的出現。通過查詢當前瀏覽器...