大家好蚜点，我是IT修真院北京分院25期的學員帝璧，一枚正直純潔善良的web前端程序員
今天給大家分享一下先誉，修真院官網(wǎng)css任務13，深度思考中的知識點——移動端有哪些常見的布局方式的烁？
1.背景介紹
隨著智能手機的普及以及社會的發(fā)展褐耳，傳統(tǒng)的網(wǎng)站布局已經(jīng)無法適應現(xiàn)狀，我們編寫的網(wǎng)頁不僅僅要展示在電腦上渴庆，也要展示在移動設備上铃芦，而移動設備種類繁多，一般的電腦端的頁面布局在手機上無法完全適應襟雷，所以在手機端上我們要重新布局刃滓。
2.知識剖析
2.1固定布局
固定布局是第一次做移動端時最好的選擇方式,思路沿用PC端,上手比較快。在標簽里把 viewport 加好,然后設想整個網(wǎng)頁的寬度為 320px 即可耸弄。 其他地方根據(jù) PC 端來布局咧虎。 缺點:大屏手機顯示網(wǎng)頁比較寬,固定布局寬度參照永遠是 320px,導致左右兩 邊會有空白。
2.2流體布局
流布局與固定寬度布局基本不同點就在于對網(wǎng)站尺寸的測量單位不同叙赚。固定寬度布局使用的是像素老客，但是流布局使用的是百分比，看到百分比震叮，你應該想到胧砰，這將提供了很強的可塑性和流動性。換句話說苇瓣，通過設置了百分比尉间，你將不需要考慮設備尺寸或者屏幕寬度大小了，結論就是，你可以為每種情形找到一種可行的方案哲嘲，因為你的設計尺寸將適應所有的設備尺寸贪薪。
2.3FLEX布局
flex也稱為彈性布局，他會根據(jù)頁面的剩余寬度自動分配空間眠副。
2.4柵格布局
bootstrap是一個比較流行的響應式前端框架画切，利用bootstrap的柵格系統(tǒng)可以實現(xiàn)響應式的移動端布局。
3.常見問題
移動端和PC端的區(qū)別
4.解決方案
第一： PC考慮的是瀏覽器的兼容性囱怕，而移動端開發(fā)考慮的更多的是手機兼容性霍弹，因為目前不管是android手機還是ios手機，一般瀏覽器使用的都是webkit內(nèi)核娃弓，所以說做移動端開發(fā)典格，更多考慮的應該是手機分辨率的適配，和不同操作系統(tǒng)的略微差異化台丛。
第二： 在部分事件的處理上耍缴，移動端多出來的事件是觸屏事件，而缺少的是hover事件挽霉。 另外包括移動端彈出的手機鍵盤的處理防嗡，這樣的問題在PC端都是遇不到的
第三：在移動端有很多網(wǎng)頁是可以橫屏看也可以豎屏看，并且很多屏幕的餓分辨率都是不一樣的侠坎，所以只要牽涉到移動端都要考慮用響應式布局
第四： 在動畫處理上本鸣，PC端由于要考慮IE的兼容性，所以通常使用JS做動畫的通用性會更好一些硅蹦，但是CSS3做了很大的犧牲， 而在手機端闷煤，如果要做一些動畫童芹、特效等，第一選擇是CSS3鲤拿， 既簡單假褪、效率又高。
第五：Pc端的交互是鼠標近顷，鍵盤的交互而移動端變成了觸摸生音，手勢的交互
5.編碼實戰(zhàn)
6.擴展思考
手機端軟件界面設計中的幾種常用布局樣式
7.參考文獻
參考二：移動端布局淺談
8.更多討論
你們覺得響應式好呢，還是手機和PC端分開來寫窒升？
9.鳴謝
感謝大家觀看
BY :王姝麗
視頻鏈接:密碼: xdcp
技能樹.IT修真院
“我們相信人人都可以成為一個工程師缀遍，現(xiàn)在開始，找個師兄饱须，帶你入門域醇，掌控自己學習的節(jié)奏，學習的路上不再迷茫”譬挚。
這里是技能樹.IT修真院锅铅，成千上萬的師兄在這里找到了自己的學習路線，學習透明化减宣，成長可見化盐须，師兄1對1免費指導∑犭纾快來與我一起學習吧?贼邓！
