浪訊科技規劃師與你聊聊呼應式網頁布局

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

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

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

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

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

很多時候，單一方法的布局呼應無法滿意理想作用，需求結合多種組合方法，但原則上盡可能時堅持簡單輕盈，并且同一斷點內（產生布局改動的臨界點稱之為斷點）堅持一致邏輯。否則頁面完成得太過雜亂，也會影響全體體會和頁面性能。