為了嘗試避免這場戰斗，我們準備了一系列響應式設計模式，您可以在決定如何布局頁面設計時作為跳躍開始。
網站建設響應式設計模式的最佳方法
有很多方法來處理網頁的設計，我建議您使用您最喜歡的方法，并且允許您制作最佳設計來解決網站的業務目標。
然而，不管你的做法如何，當通過并設計每個頁面模板時，有幾個關鍵的東西要保持在你的頭腦中。
我是否涵蓋了每個視口的可能性？
我的設計規模是否適當，仍然會實現業務目標
您的每個設計模式都將像在平板電腦上一樣在移動設備上運行，如在小型筆記本電腦或大型顯示器上。如果您正在構建桌面版模板，首先請記住，并排放置的任何內容可能需要疊加在一起，因此，我總是鼓勵設計師至少從移動設備的線框透視。
移動第一視角迫使客戶端圍繞內容層次結構做出艱難的決策，然后幫助您定義在通過其他視口設計時最重要的元素。
我需要設計頁面模板嗎？
很好的問題！
近年來，一直推動使用風格指南和建筑設計組件而不是頁面模板。模板仍然在最后，但它們是由不同組件的組合組成，并被拉在一起以創建“完美的頁面”。
作為全球先進的科技巨頭，Google一直推崇響應式設計，并在今年的4月21日發布了重大的更新，目的是提高響應式在移動終端上的運行效率。盡管在更新中沒有明確表明你必須使用響應式設計。只是簡單的提示響應式設計擁有不錯的UX和優越的性能，是移動設計方面的一個不錯的選擇。
考慮到這一點，讓我們一起來測試一下“響應式設計”與“自適應設計”在性能和用戶體驗上各自的利弊。
自移動終端設備全面普及后，爭論最為激烈的是我們在響應式設計，自適應設計和獨立的手機網站（擁有獨自的M.URL）該做何選擇。基于本文章的討論重點，我們先避開獨立的手機網站不談，因為它似乎不太受設計師和企業的歡迎，可能是因為它必須得單獨創建的原因吧。（前期的開發和后期的維護成本都很大）
首先，響應式和自適應最為關鍵的區別是什么呢？
簡而言之，響應式就相當于液體，它可以自動適應不同尺寸的屏幕，無論你的設備尺寸多么奇葩。響應式使用CSS media queries的方法，根據目標設備自動改變風格如顯示類型,寬度、高度等，這能很好解決不同屏幕尺寸的顯示問題。
而自適應設計是基于斷點使用靜態布局，一旦頁面被加載就無法再進行自動適應，自適應會自動檢測屏幕的大小來加載適當的工作布局，也就是說，當你要采用自適應設計網站時，你得一個一個設計6種常見的屏幕布局。
1.320
2.480
3.760
4.960
5.1200
6.1600
顯然，自適應設計需要做更多的工作，你必須至少設計6種常見的布局。而響應式設計可以更好地適應復雜的媒體設備要求，能很好地解決顯示和性能問題。
特別是后者，這幾年有著諸多的爭議。因為許多網站提供的是完整的桌面模型，即便沒有在移動端加載，但也會明顯拖慢網站的速度。為了解決這一問題，我們可以用CSS3 的media queries解決方案，但會有一些折衷，因為響應式網站無法達到專門的移動網站那樣快。
自適應可用于改造現有的網站使其更好地適應移動端。這使你的設計可控制和開發多個特定的視圖。你開發視圖的數量完全取決于你，你的公司和全面的預算。然而，它也提供了一定量的控件（例如在內容和布局上），如此你便無須使用響應式設計。
通常,你首先會設計一個低分辨率視圖,制定你自己的方法確保設計不會被內容所限制。
正如前面所提到的，它那六個標準的設計布局。然而，你可以通過查看你網站，分析最為常用的設備，然后決定這些視圖該如何設計。
如果你想在scratch上從頭設計一個自適應網站也行。從最低的分辨率開始設計，制定你自己的方法。接著你可以用CSS3 的media queries擴展更高分辨率的布局視圖。當你設計多種分辨率時你會發現，在改變窗口大小的時候將會“跳出”布局。
自適應網站可以用于設計和開發一個擁有多個自適應視圖的網站。所以這種設計通常用于改造網站。
現在絕大多數網站都使用響應式設計，它適合缺乏經驗的設計師和開發人員使用?？捎玫闹黝}可以直接從CMS系統（如Wordpress，Joomla和Durpal）獲取。
相比自適應網站，響應式網站省去了很多的控件，同時也省去了不少建立和維護的功夫。響應式布局就是一種流體，在按百分比縮放時也能相當的流暢。這也可能再次導致“跳出”當你在調整窗口大小時。如下圖，下圖現實的是一個流體布局，設計師使用百分比縮放時，視圖將會被自動地調整。
使用響應式設計，你要記住所以的布局。這當然可能會使過程混亂，并且使設計更加復雜。這就意味著你應該專注于中等分辨率的視圖，然后再用media querie調整為更低或更高的分辨率。
所以通常的做法是，在一個新的項目中使用響應式設計，在后期的改造中使用自適應設計。
正如前面所討論的,響應網站會在網站速度有所弊端(如果他們沒有正確地實現)。
響應式在編碼時要求也比較嚴格，以確保適應每塊訪它的屏幕。然而額外的工作也是值得商討的，因為自適應設計要求為每一個布局單獨開發和維護HTML和CSS代碼。修改自適應網站也相當麻煩。因為當它實現的時候你得確保每一個功能（如SEO，內容和鏈接）能正常運行。
當然,你應該也要考慮用戶體驗。因為響應式基本上打亂了周圍的內容以確保流暢符合設備窗口,你需要特別注意的是視覺層次結構設計,因為它周圍的內容已被打亂。
根據Amy Schade的觀點，響應式設計往往會造成另外一個難題，那就是如何重組大頁面的元素以適應既小有長的頁面，反之亦然。然而，單是確保元素適應頁面是遠遠不夠的。為了響應式設計更加成功，設計也必須確保屏幕的分辨率和尺寸能夠適應。
所以，無論你采用哪種技術都沒有捷徑可言，都需要確保所創建的網站能適應所有的屏幕。響應式稍占優勢，你無須花大量的時間在網站的維護上。
歸根結底，最重要的是要考慮你用戶屬于哪類群體，不管你采用哪種設計方式，一旦你知道他們的習慣，知道他們更傾向于用什么設備訪問該網站，你在設計你的網站時該采用哪種方式，哪種布局，想法自然會涌現出來。
很大程度上還取決你是現有的網站還是一個新項目。響應式設計已成為首選的設計技術和思想，現在有1/8的網站采用響應式設計（雖然這數字不及自適應設計）。響應式設計增長迅猛，幾乎已經達到作為獨立移動網站的相同水平。
記住這點，如果僅僅是考慮屏幕的兼容問題，可以有把握的說，那響應式設計通常是首選技術。
然而，如果客戶和公司存在預算，自適應設計可能是更好的選擇。根據Catchpoint進行的一個測試，他們在Wordpress創建兩個網站，一個使用標準的WP TwentyFourteen響應式主題,另一個使用一個名為Wiziapp的插件。
插件基于他們訪問該網站的設備向用戶提供了移動主題，還提供了高級的配置選項，這樣就可以進一步簡化整個流程。
結果加載所用的時間如下表：
還應該強調一點，這沒有進行任何優化。但這確實表明，響應式網站需要下載桌面所需的東西。如此表明，主題并不能提供很好的性能。
再次強調一下，media queries可以克服這個問題。至于為什么使用響應式設計，上面就是一個很好的例子。然而流行并不代表是最好的。在最好的東西出現之前，我們很難知道我們能做什么，除了學習如何正確的代碼規范和實現一個很好網站。
響應式設計將會保持受歡迎的趨勢，這可能是因為我們還沒有找到一個更好解決重大維護和適應性要求。自適應設計也還沒有滅亡，盡管不太受程序員的待見。有一點是肯定的，我們將會看到一些改進，完善現階段所出現的問題。替代響應式設計的技術也在不遠將來浮出水面。
響應式設計有些人認為這是一種趨勢。但它不僅僅是一種趨勢。這是一個新的設計方案-它有助于解決與不同的決議和設備（臺式機，筆記本電腦，平板電腦和移動設備）的設計問題。我將分享一個我覺得是很好的響應網站列表。我把這個列表分為兩類：自適應和流體和響應。
適應性設計
下面的網站是自適應設計的例子。設計采用基于視窗的寬度。
IA
信息架構師是我最喜歡的網站之一。它是美麗的。我欣賞這樣一個美麗的設計只使用兩種顏色（黑色和紅色）其實只是網頁安全字體，沒有紋理，沒有花哨的JavaScript效果或自定義字體。將導航列表菜單為下拉菜單在較小的格式很聰明，因為它節省了很多空間，在頭。
截圖
倫敦倫敦
雖然倫敦的網站是不是流體，但它做了一個非常好的工作對響應的布局。布局始終放在每個視口布局。最敏感的網站使用最大寬度來創建流體圖像（參考我的響應的設計教程），但在頭部的圖像被掩蓋在全尺寸。
截圖
食品感官
注意看食物感覺部位反應如何。它來自于詳細的柱側邊欄1-column布局布局。隨著設計變得越來越小，它變得越來越小。該滑塊有2行導航文本在底部的大格式，然后從2行文本到一行，然后消失在小格式。導航菜單上有大格式的圖標。菜單圖標消失在較小的格式。
截圖
叉細胞質雄性不育
到“叉”網站，調整您的瀏覽器窗口。注意到在水面上的視差滾動效應？那是有趣。然而，我不在隱藏的功能圖標它小是因為小視口的讀者會失去一些信息一致。
截圖
倫敦和合作伙伴
設計明智的，我不是一個大風扇的這個網站，倫敦和合作伙伴。但響應的布局是非常好的計劃-從大型四柱式布局的一個小1-column布局。最敏感的網站隱藏某些內容，因為它變小了，但這個網站保持它的所有。它表明，即使內容豐富的網站可以響應。
截圖
流體與響應
現在讓我們來看看流體和響應的網站。下面的網站不僅反應在視口寬基礎，但布局和內容是流體/彈性。