一個(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.模塊中內容：刪減-增加;