浪訊科技規(guī)劃師與你聊聊呼應(yīng)式網(wǎng)頁布局

在談呼應(yīng)式布局前，咱們先整理下網(wǎng)頁規(guī)劃中全體頁面排版布局，常見的主要有如下幾種類型：
布局類型：

布局完成
選用何種方法完成布局規(guī)劃，也有不同的方法，這里根據(jù)頁面的完成單位而言，分為四種類型：固定布局、可切換的固定布局、彈性布局、混合布局。
.固定布局：以像素作為頁面的基本單位，不論設(shè)備屏幕及瀏覽器寬度，只規(guī)劃一套尺度；
.可切換的固定布局：同樣以像素作為頁面單位，參閱干流設(shè)備尺度，規(guī)劃幾套不同寬度的布局。經(jīng)過設(shè)其他屏幕尺度或?yàn)g覽器寬度，挑選最合適的那套寬度布局；
.彈性布局：以百分比作為頁面的基本單位，能夠習(xí)慣必定范圍內(nèi)一切尺度的設(shè)備屏幕及瀏覽器寬度，并能完美使用有用空間展示最佳作用；
.混合布局：同彈性布局相似，能夠習(xí)慣必定范圍內(nèi)一切尺度的設(shè)備屏幕及瀏覽器寬度，并能完美使用有用空間展示最佳作用；僅僅混合像素、和百分比兩種單位作為頁面單位。

可切換的固定布局、彈性布局、混合布局都是現(xiàn)在可被選用的呼應(yīng)式布局方法。
其間可切換的固定布局的完成本錢最低，但拓展性比較差；而彈性布局與混合布局作用具呼應(yīng)性，都是比較理想的呼應(yīng)式布局完成方法。僅僅關(guān)于不同類型的頁面排版布局完成呼應(yīng)式規(guī)劃，需求選用不必的完成方法。通欄、等分結(jié)構(gòu)的適合選用彈性布局方法、而關(guān)于非等分的多欄結(jié)構(gòu)往往需求選用混合布局的完成方法。

布局呼應(yīng) 對(duì)頁面進(jìn)行呼應(yīng)式的規(guī)劃完成，需求對(duì)相同內(nèi)容進(jìn)行不同寬度的布局規(guī)劃，有兩種方法：桌面優(yōu)先（從桌面端開端向下規(guī)劃）；移動(dòng)優(yōu)先（從移動(dòng)端向上規(guī)劃）； 無論根據(jù)那種形式的規(guī)劃，要兼容一切設(shè)備，布局呼應(yīng)時(shí)不可避免地需求對(duì)模塊布局做一些改動(dòng)（產(chǎn)生布局改動(dòng)的臨界點(diǎn)稱之為斷點(diǎn)）， 咱們經(jīng)過JS獲取設(shè)備的屏幕寬度，來改動(dòng)網(wǎng)頁的布局，這一進(jìn)程咱們能夠稱之為布局呼應(yīng)屏幕。常見的主要有如下幾種方法：
布局不變，即頁面中全體模塊布局不產(chǎn)生改動(dòng)，主要有：
.模塊中內(nèi)容：揉捏－拉伸；
.模塊中內(nèi)容：換行－平鋪；
.模塊中內(nèi)容：刪減－添加；

布局改動(dòng)，即頁面中的全體模塊布局產(chǎn)生改動(dòng)，主要有：
.模塊位置變換；
.模塊展示方法改動(dòng)：隱藏－展開；
.模塊數(shù)量改動(dòng)：刪減－添加；

很多時(shí)候，單一方法的布局呼應(yīng)無法滿意理想作用，需求結(jié)合多種組合方法，但原則上盡可能時(shí)堅(jiān)持簡單輕盈，并且同一斷點(diǎn)內(nèi)（產(chǎn)生布局改動(dòng)的臨界點(diǎn)稱之為斷點(diǎn)）堅(jiān)持一致邏輯。否則頁面完成得太過雜亂，也會(huì)影響全體體會(huì)和頁面性能。