響應(yīng)式設(shè)計(jì)有些人認(rèn)為這是一種趨勢(shì)。但它不僅僅是一種趨勢(shì)。這是一個(gè)新的設(shè)計(jì)方案-它有助于解決與不同的決議和設(shè)備（臺(tái)式機(jī)，筆記本電腦，平板電腦和移動(dòng)設(shè)備）的設(shè)計(jì)問(wèn)題。我將分享一個(gè)我覺(jué)得是很好的響應(yīng)網(wǎng)站列表。我把這個(gè)列表分為兩類(lèi)：自適應(yīng)和流體和響應(yīng)。

適應(yīng)性設(shè)計(jì)

下面的網(wǎng)站是自適應(yīng)設(shè)計(jì)的例子。設(shè)計(jì)采用基于視窗的寬度。

IA

信息架構(gòu)師是我最喜歡的網(wǎng)站之一。它是美麗的。我欣賞這樣一個(gè)美麗的設(shè)計(jì)只使用兩種顏色（黑色和紅色）其實(shí)只是網(wǎng)頁(yè)安全字體，沒(méi)有紋理，沒(méi)有花哨的JavaScript效果或自定義字體。將導(dǎo)航列表菜單為下拉菜單在較小的格式很聰明，因?yàn)樗?jié)省了很多空間，在頭。

截圖

倫敦倫敦

雖然倫敦的網(wǎng)站是不是流體，但它做了一個(gè)非常好的工作對(duì)響應(yīng)的布局。布局始終放在每個(gè)視口布局。最敏感的網(wǎng)站使用最大寬度來(lái)創(chuàng)建流體圖像（參考我的響應(yīng)的設(shè)計(jì)教程），但在頭部的圖像被掩蓋在全尺寸。

截圖

食品感官

注意看食物感覺(jué)部位反應(yīng)如何。它來(lái)自于詳細(xì)的柱側(cè)邊欄1-column布局布局。隨著設(shè)計(jì)變得越來(lái)越小，它變得越來(lái)越小。該滑塊有2行導(dǎo)航文本在底部的大格式，然后從2行文本到一行，然后消失在小格式。導(dǎo)航菜單上有大格式的圖標(biāo)。菜單圖標(biāo)消失在較小的格式。

截圖

叉細(xì)胞質(zhì)雄性不育

到“叉”網(wǎng)站，調(diào)整您的瀏覽器窗口。注意到在水面上的視差滾動(dòng)效應(yīng)？那是有趣。然而，我不在隱藏的功能圖標(biāo)它小是因?yàn)樾∫暱诘淖x者會(huì)失去一些信息一致。

截圖

倫敦和合作伙伴

設(shè)計(jì)明智的，我不是一個(gè)大風(fēng)扇的這個(gè)網(wǎng)站，倫敦和合作伙伴。但響應(yīng)的布局是非常好的計(jì)劃-從大型四柱式布局的一個(gè)小1-column布局。最敏感的網(wǎng)站隱藏某些內(nèi)容，因?yàn)樗冃×耍@個(gè)網(wǎng)站保持它的所有。它表明，即使內(nèi)容豐富的網(wǎng)站可以響應(yīng)。

截圖

流體與響應(yīng)

現(xiàn)在讓我們來(lái)看看流體和響應(yīng)的網(wǎng)站。下面的網(wǎng)站不僅反應(yīng)在視口寬基礎(chǔ)，但布局和內(nèi)容是流體/彈性。