固定寬度做法:

早期有些網(wǎng)站把頁面設(shè)置成320的寬度，超出部分留白

?優(yōu)點(diǎn)：思路沿用PC端，上手簡單，可以很好的還原設(shè)計(jì)稿

? 缺點(diǎn)：【用戶體驗(yàn)較差】大屏幕手機(jī)及手機(jī)橫屏?xí)r，兩邊是留白較大，且大屏幕手機(jī)下看起來頁面會(huì)特別小，操作的按鈕也很小.

?流式布局:

?寬度百分比布局 ,高度固定

?優(yōu)點(diǎn):流動(dòng)布局可以很好解決自適應(yīng)需求，

?缺點(diǎn):更適用于對橫向拉伸的設(shè)計(jì)元素,設(shè)計(jì)的時(shí)候存在很多局限性,流式是通過大量的百分比布局，會(huì)出現(xiàn)兼容性的問題

? 響應(yīng)式做法:

????核心:?媒體查詢

? ???根據(jù)目標(biāo)用戶的訪問設(shè)備的主要類型做三種或四種布局。

? ? ?每種布局有一個(gè)區(qū)間即可利用媒體查詢@media，可以為不同分辨率的設(shè)備加載不同的樣式。

? ? ?優(yōu)點(diǎn):相對精確的控制顯示效果

? ? ?缺點(diǎn):可能需要對同一個(gè)類書寫不同的樣式會(huì)導(dǎo)致代碼比較繁復(fù)，后期維護(hù)困難)

????多欄布局