大家好，我是IT修真院北京分院25期的學(xué)員，一枚正直純潔善良的web前端程序員
今天給大家分享一下，修真院官網(wǎng)css任務(wù)13，深度思考中的知識(shí)點(diǎn)——移動(dòng)端有哪些常見(jiàn)的布局方式？
1.背景介紹
隨著智能手機(jī)的普及以及社會(huì)的發(fā)展，傳統(tǒng)的網(wǎng)站布局已經(jīng)無(wú)法適應(yīng)現(xiàn)狀，我們編寫(xiě)的網(wǎng)頁(yè)不僅僅要展示在電腦上，也要展示在移動(dòng)設(shè)備上，而移動(dòng)設(shè)備種類繁多，一般的電腦端的頁(yè)面布局在手機(jī)上無(wú)法完全適應(yīng)，所以在手機(jī)端上我們要重新布局。
2.知識(shí)剖析
2.1固定布局
固定布局是第一次做移動(dòng)端時(shí)最好的選擇方式,思路沿用PC端,上手比較快。在標(biāo)簽里把 viewport 加好,然后設(shè)想整個(gè)網(wǎng)頁(yè)的寬度為 320px 即可。 其他地方根據(jù) PC 端來(lái)布局。 缺點(diǎn):大屏手機(jī)顯示網(wǎng)頁(yè)比較寬,固定布局寬度參照永遠(yuǎn)是 320px,導(dǎo)致左右兩 邊會(huì)有空白。
2.2流體布局
流布局與固定寬度布局基本不同點(diǎn)就在于對(duì)網(wǎng)站尺寸的測(cè)量單位不同。固定寬度布局使用的是像素，但是流布局使用的是百分比，看到百分比，你應(yīng)該想到，這將提供了很強(qiáng)的可塑性和流動(dòng)性。換句話說(shuō)，通過(guò)設(shè)置了百分比，你將不需要考慮設(shè)備尺寸或者屏幕寬度大小了，結(jié)論就是，你可以為每種情形找到一種可行的方案，因?yàn)槟愕脑O(shè)計(jì)尺寸將適應(yīng)所有的設(shè)備尺寸。
2.3FLEX布局
flex也稱為彈性布局，他會(huì)根據(jù)頁(yè)面的剩余寬度自動(dòng)分配空間。
2.4柵格布局
bootstrap是一個(gè)比較流行的響應(yīng)式前端框架，利用bootstrap的柵格系統(tǒng)可以實(shí)現(xiàn)響應(yīng)式的移動(dòng)端布局。
3.常見(jiàn)問(wèn)題
移動(dòng)端和PC端的區(qū)別
4.解決方案
第一： PC考慮的是瀏覽器的兼容性，而移動(dòng)端開(kāi)發(fā)考慮的更多的是手機(jī)兼容性，因?yàn)槟壳安还苁莂ndroid手機(jī)還是ios手機(jī)，一般瀏覽器使用的都是webkit內(nèi)核，所以說(shuō)做移動(dòng)端開(kāi)發(fā)，更多考慮的應(yīng)該是手機(jī)分辨率的適配，和不同操作系統(tǒng)的略微差異化。
第二： 在部分事件的處理上，移動(dòng)端多出來(lái)的事件是觸屏事件，而缺少的是hover事件。 另外包括移動(dòng)端彈出的手機(jī)鍵盤(pán)的處理，這樣的問(wèn)題在PC端都是遇不到的
第三：在移動(dòng)端有很多網(wǎng)頁(yè)是可以橫屏看也可以豎屏看，并且很多屏幕的餓分辨率都是不一樣的，所以只要牽涉到移動(dòng)端都要考慮用響應(yīng)式布局
第四： 在動(dòng)畫(huà)處理上，PC端由于要考慮IE的兼容性，所以通常使用JS做動(dòng)畫(huà)的通用性會(huì)更好一些，但是CSS3做了很大的犧牲， 而在手機(jī)端，如果要做一些動(dòng)畫(huà)、特效等，第一選擇是CSS3， 既簡(jiǎn)單、效率又高。
第五：Pc端的交互是鼠標(biāo)，鍵盤(pán)的交互而移動(dòng)端變成了觸摸，手勢(shì)的交互
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
手機(jī)端軟件界面設(shè)計(jì)中的幾種常用布局樣式
7.參考文獻(xiàn)
參考二：移動(dòng)端布局淺談
8.更多討論
你們覺(jué)得響應(yīng)式好呢，還是手機(jī)和PC端分開(kāi)來(lái)寫(xiě)？
9.鳴謝
感謝大家觀看
BY :王姝麗
視頻鏈接:密碼: xdcp
技能樹(shù).IT修真院
“我們相信人人都可以成為一個(gè)工程師，現(xiàn)在開(kāi)始，找個(gè)師兄，帶你入門(mén)，掌控自己學(xué)習(xí)的節(jié)奏，學(xué)習(xí)的路上不再迷?！薄?/p>
這里是技能樹(shù).IT修真院，成千上萬(wàn)的師兄在這里找到了自己的學(xué)習(xí)路線，學(xué)習(xí)透明化，成長(zhǎng)可見(jiàn)化，師兄1對(duì)1免費(fèi)指導(dǎo)。快來(lái)與我一起學(xué)習(xí)吧?！
