大家好掩浙，我是IT修真院鄭州分院第五期的學(xué)員王姝麗，一枚正直秸歧、純潔厨姚、善良的前端程序員。
今天給大家分享一下键菱，修真院官網(wǎng)css任務(wù)13谬墙，深度思考中的知識點(diǎn)——移動端有哪些常見布局方式？
1.背景介紹
隨著智能手機(jī)的普及以及社會的發(fā)展经备，傳統(tǒng)的網(wǎng)站布局已經(jīng)無法適應(yīng)現(xiàn)狀拭抬，我們編寫的網(wǎng)頁不僅僅要展示在電腦上，也要展示在移動設(shè)備上侵蒙，而移動設(shè)備種類繁多造虎，一般的電腦端的頁面布局在手機(jī)上無法完全適應(yīng)，所以在手機(jī)端上我們要重新布局纷闺。
2.知識剖析
固定布局
固定布局是第一次做移動端時最好的選擇方式,思路沿用PC端,上手比較快算凿。在標(biāo)簽里把 viewport 加好,然后設(shè)想整個網(wǎng)頁的寬度為 320px 即可。 其他地方根據(jù) PC 端來布局犁功。 缺點(diǎn):大屏手機(jī)顯示網(wǎng)頁比較寬,固定布局寬度參照永遠(yuǎn)是 320px,導(dǎo)致左右兩 邊會有空白氓轰。
.box{
width: 320px;
height: 650px;
margin: 0 auto;
background-color: #29b078;
color: white;
}
流體布局
流布局與固定寬度布局基本不同點(diǎn)就在于對網(wǎng)站尺寸的測量單位不同。固定寬度布局使用的是像素浸卦，但是流布局使用的是百分比署鸡，看到百分比，你應(yīng)該想到限嫌，這將提供了很強(qiáng)的可塑性和流動性靴庆。換句話說，通過設(shè)置了百分比怒医，你將不需要考慮設(shè)備尺寸或者屏幕寬度大小了炉抒，結(jié)論就是，你可以為每種情形找到一種可行的方案裆熙，因?yàn)槟愕脑O(shè)計尺寸將適應(yīng)所有的設(shè)備尺寸端礼。
.box1{
width: 38%;
float: left;
margin: 5%;
}
bootstrap布局
bootstrap是一個比較流行的響應(yīng)式前端框架禽笑，利用bootstrap的柵格系統(tǒng)可以實(shí)現(xiàn)響應(yīng)式的移動端布局入录。
bootstrap的柵格是基于百分比的，在使用的時候佳镜，我們給相應(yīng)的div設(shè)置col-sm-4, col-md-6,col-lg-12僚稿。
class="c1 col-lg-2 col-md-3 col-sm-4 col-xs-6"
多列布局
column-count是css3的一個屬性，主要用于文本元素蟀伸，支持響應(yīng)式蚀同。
column-count屬性指定某個元素應(yīng)分為的列數(shù)缅刽。
column-width屬性指定列的寬度。
.box1{
columns: 200px 3;
padding: 50px 0;
}
flex布局
flex也稱為彈性布局蠢络，他會根據(jù)頁面的剩余寬度自動分配空間衰猛。
3.常見問題
移動端和PC端的區(qū)別
4.解決方案
第一： PC考慮的是瀏覽器的兼容性，而移動端開發(fā)考慮的更多的是手機(jī)兼容性刹孔，因?yàn)槟壳安还苁莂ndroid手機(jī)還是ios手機(jī)啡省，一般瀏覽器使用的都是webkit內(nèi)核，所以說做移動端開發(fā)髓霞，更多考慮的應(yīng)該是手機(jī)分辨率的適配卦睹，和不同操作系統(tǒng)的略微差異化。
第二： 在部分事件的處理上方库，移動端多出來的事件是觸屏事件结序，而缺少的是hover事件。 另外包括移動端彈出的手機(jī)鍵盤的處理纵潦，這樣的問題在PC端都是遇不到的
第三：Pc端最常用的布局是固定寬度為980px（也有960px徐鹤，1000px，1200px）邀层；而在移動端凳干，因?yàn)橛泻芏嗑W(wǎng)頁是可以橫屏看也可以豎屏看，并且很多屏幕的餓分辨率都是不一樣的被济，所以只要牽涉到移動端都要考慮用響應(yīng)式布局
第四： 在動畫處理上救赐，PC端由于要考慮IE的兼容性，所以通常使用JS做動畫的通用性會更好一些只磷，但是CSS3做了很大的犧牲经磅， 而在手機(jī)端，如果要做一些動畫钮追、特效等预厌，第一選擇肯定是CSS3， 既簡單元媚、效率又高轧叽。
第五： 一般pc端用jquery，移動端用zepto刊棕，因?yàn)橐苿佣说牧髁窟€是比較重要的炭晒， 所以引入的資源或者插件，能小則小甥角，一個30k的資源和一個80k的資源网严，在移動端的差別還是挺大的。
第六：Pc端的交互是鼠標(biāo)嗤无，鍵盤的交互而移動端變成了觸摸震束，手勢的交互
5.編碼實(shí)戰(zhàn)
都在dome里怜庸。
6.擴(kuò)展思考
手機(jī)端軟件界面設(shè)計中的幾種常用布局
7.參考文獻(xiàn)
參考二：移動端布局淺談
8.更多討論
1、你們覺得響應(yīng)式好呢垢村，還是手機(jī)和PC端分開來寫割疾？
網(wǎng)址這里是知乎的一個討論，還是還根據(jù)情況而定嘉栓。
2杈曲、columns:200px 2;好像并沒有顯示200px寬。
在實(shí)際布局中胸懈，所定義的列數(shù)是最大的列數(shù)担扑。當(dāng)瀏覽器寬度不足，多列的列數(shù)會自動減少趣钱，而每列的寬度會自動調(diào)整涌献。當(dāng)瀏覽器寬度不足時，3列就會自動變成2列首有，而寬度也不再是200px燕垃。
視頻鏈接
感謝葉紫陽師兄，此教程是在他們之前技術(shù)分享的基礎(chǔ)上完善而成井联。
今天的分享就到這里啦卜壕，歡迎大家點(diǎn)贊、轉(zhuǎn)發(fā)烙常、留言轴捎、拍磚~
技能樹.IT修真院
“我們相信人人都可以成為一個工程師，現(xiàn)在開始蚕脏，找個師兄侦副，帶你入門，掌控自己學(xué)習(xí)的節(jié)奏驼鞭，學(xué)習(xí)的路上不再迷们匮保”。
這里是技能樹.IT修真院挣棕，成千上萬的師兄在這里找到了自己的學(xué)習(xí)路線译隘，學(xué)習(xí)透明化，成長可見化洛心，師兄1對1免費(fèi)指導(dǎo)固耘。快來與我一起學(xué)習(xí)吧 皂甘！
我的學(xué)習(xí)邀請碼：12164783? ? 或者你可以直接點(diǎn)擊此鏈接：http://www.jnshu.com/login/1/12164783
