歡迎來到合肥浪訊網絡科技有限公司官網
  咨詢服務熱線:400-099-8848

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

發(fā)布時間:2020-12-11 文章來源:本站  瀏覽次數:2810

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

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

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

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


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


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

上一條:浪訊科技高檔規(guī)劃師與你聊...

下一條:設計干貨!淺析web網站...