一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。這個(gè)概念是為解決移動(dòng)互聯(lián)網(wǎng)瀏覽而誕生的。
響應式布局可以為不同終端的用戶(hù)提供更加舒適的界面和更好的用戶(hù)體驗,而且隨著(zhù)目前大屏幕移動(dòng)設備的普及,用“大勢所趨”來(lái)形容也不為過(guò)。隨著(zhù)越來(lái)越多的設計師采用這個(gè)技術(shù),我們不僅看到很多的創(chuàng )新,還看到了一些成形的模式。
在談響應式布局前,網(wǎng)奇科技先梳理下網(wǎng)站設計中整體頁(yè)面排版布局,常見(jiàn)的主要有如下幾種類(lèi)型:
布局實(shí)現
采用何種方式實(shí)現布局設計,也有不同的方式,這里基于頁(yè)面的實(shí)現單位而言,分為四種類(lèi)型:固定布局、可切換的固定布局、彈性布局、混合布局。
固定布局:以像素作為頁(yè)面的基本單位,不管設備屏幕及瀏覽器寬度,只設計一套尺寸;
可切換的固定布局:同樣以像素作為頁(yè)面單位,參考主流設備尺寸,設計幾套不同寬度的布局。通過(guò)設別的屏幕尺寸或瀏覽器寬度,選擇最合適的那套寬度布局;
彈性布局:以百分比作為頁(yè)面的基本單位,可以適應一定范圍內所有尺寸的設備屏幕及瀏覽器寬度,并能完美利用有效空間展現最佳效果;
混合布局:同彈性布局類(lèi)似,可以適應一定范圍內所有尺寸的設備屏幕及瀏覽器寬度,并能完美利用有效空間展現最佳效果;只是混合像素、和百分比兩種單位作為頁(yè)面單位。
布局響應
對頁(yè)面進(jìn)行響應式的設計實(shí)現,需要對相同內容進(jìn)行不同寬度的布局設計,有兩種方式:桌面優(yōu)先(從桌面端開(kāi)始向下設計);移動(dòng)優(yōu)先(從移動(dòng)端向上設計);
無(wú)論基于那種模式的設計,要兼容所有設備,布局響應時(shí)不可避免地需要對模塊布局做一些變化(發(fā)生布局改變的臨界點(diǎn)稱(chēng)之為斷點(diǎn)),
我們通過(guò)JS獲取設備的屏幕寬度,來(lái)改變網(wǎng)頁(yè)的布局,這一過(guò)程我們可以稱(chēng)之為布局響應屏幕。常見(jiàn)的主要有如下幾種方式:
布局不變,即頁(yè)面中整體模塊布局不發(fā)生變化,主要有:
1.模塊中內容:擠壓-拉伸;? 2.模塊中內容:換行-平鋪;? 3.模塊中內容:刪減-增加;