1. 什麼叫響應式網站
響應式布局，是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。
優點：
1、用戶體驗友好
響應式網站可以根據不同終端、不同尺寸和不同應用環境，自動調整界面布局、展示內容、內容大小，提供非常好視覺展示效果，一致性友好體驗。
2、節省設計與開發時間
響應式網站界面只需要設計兩套設計效果圖，後期維護不需要分別維護pc界面、pad界面、移動界面，專心維護一個網站即可。
3、SEO友好
由於響應網站在不同終端有友好的界面展示效果，用戶可以與網站一直保持聯系，比如URL不變積累分享。
4、可以適應所有設備屏幕
擁有了響應式的網站設計則不同，用戶可以一直和網站保持聯系，而且它對用戶非常用好。
(1)前端的響應式網站擴展閱讀：
響應式布局的缺點
1、設計與風格有局限性
自由度太低，局限性較大。
2、對IE老闆兼容性不友好
對於老版本IE（IE6、IE7、IE8）支持不好。
3、靈活性有所欠缺
基於不同終端的設備屬性不同，對產品用戶體驗要求就會截然不同。內容比較多帶有功能性的網站不適合做響應式網站設計。
2. 響應式網站有哪些優勢
大家好，我是老獅，H5響應式網站的優勢，在網上有各種各樣的觀點，但是大多數都是專業的前端分享的，或者是一些很沒有營養的分享。作為已經在網站推廣行業6年的我，特別想從非技術的角度跟大家分享一下，在我認知范圍以內，響應式網站的優勢到底有哪些？或許不夠全，或許不夠專業，但你一定會得到不同角度的觀點和見解。或許您會有所收獲！
老獅認為H5響應式網站具備以下六點優勢：
01對搜索引擎友好
網上有人是這么講的：基於Flash的網站在搜索引擎上基本上是搜不到的，而搜索引擎的蜘蛛卻能抓取你的HTML5站點和索引你的內容。所有嵌入到動畫中的內容將全部可以被搜索引擎讀取，這將會驅動你的網站獲得更多的右擊流量。
老獅從產品的角度理解，搜索引擎之所以被大家廣泛使用，是因為在上面能找到我們想要的結果，而這個結果是通過網頁展現出來的。所以為什麼搜索引擎要對H5響應式網站更友好呢？
老獅認為是這樣，搜索引擎也要做客戶體驗：
現在大家使用搜索引擎的智能設備多樣。假如出來的網站是響應式的，搜索用戶更容易得到自己滿意的結果，這就是響應式網站最大的特點之一，能根據屏幕解析度調整布局，以達到最佳的瀏覽效果。
02訪問速度更快
「天下武功，唯快不破」，網站的訪問速度是毋庸置疑的重要。特別是在這個信息爆炸的時代，沒有人願意為你的網站等待10s，老獅用一句不太恰當的話形容：「他要，你必須馬上給！」
HTML5+CSS3實現的響應式網站，相對於傳統的網站為什麼更快。從技術角度說不出什麼，因為老獅根本就不是一個開發者。但是從我閱站無數的經驗中。我們發現太多的老網站為了有設計感，或者布局，都犧牲了網站的質量——直接就是設計圖稿切出來的圖片貼在網站上。這種做法不僅網站畫質感官不好（字是相對於靜態文字是模糊的），而且搜索引擎根本不認圖片，只認字，你網站表達的核心內容，搜索引擎的蜘蛛表示「我看不懂誒」，最重要的是保證網站足夠的清晰圖，圖片大小一定不會太小，導致網站頁面數據載入過多，打開速度自然慢了許多。而響應式網站都是靜態頁面，數據除了必要的產品圖，BANNER圖，都是文字的數據大小，幾乎都是秒開！
03跨平台運行
跨平台運行這個優勢跟老獅說到的第一點裡面的觀點是一致的，正因為響應式網站有跨平台運行的優勢，搜索引擎對響應式網站才更加友好。
因為響應式網站能適應多種屏幕，根據解析度的大小自動調整網站的布局，以獲取最佳的視覺效果，很好的解決了各種手機終端對傳統的PC網站不友好的問題。本身企業網站就是為了一個官方形象和企業宣傳，擁有響應式網站就豐富了更多的場景，還能應用於微信平台。可以直接綁定在微信公眾號的自定義菜單，如下圖優河馬服務號可以設置聯系方式訪問優河馬官網聯系方式頁面：微信公眾號自定義菜單綁定網站頁面
不僅如此，官方發的文章還可以用於朋友圈分享，增加網站流量，提高網站權重，這都是響應式網站應用場景的延展，閱讀原文可訪問優河馬官網進行響應式網站體驗。
如文章《微信公眾平台中，如何找回自己的賬號或密碼》，大家可以通過掃下面的二維碼進行訪問查看。就是老獅在更新維護網站的時候，同時分享到朋友圈，增加和客戶的互動以及網站的權重。
04統一的後台
老獅經常跟客戶朋友們分享，網站做好了只是一個開始，真正好的網站是需要時常打理和維護的。比如：最新產品或服務的及時發布、Banner圖根據當下行業熱門或者實時新聞做出對應的更新、網站的新聞版塊定期的更新原創的文章、公司做的最新活動去官網進行發布等等。
做網站更新，響應式網站的統一的後台的優勢就發揮出來了。
3. 響應式網站有什麼優缺點
其實今天安徽碼農科技之所以寫這個響應式網站是因為近兩年響應式網站確實很火，很多客戶通過業務員的介紹感覺神乎其神，甚至網站業務員說得自己都相信了，把自己都騙了，覺得響應式無所不能，非常完美。其實響應式並不是沒有缺點，准確的說也有很多致命的缺點。
什麼是響應式網站?
響應網站設計應根據用戶使用的設備的解析度大小進行相應的響應與調整，最大限度滿足不同設備用戶體驗需求。響應式網站設計就是一個網站能夠兼容多個終端，不需要為每個終端做一個特定的版本。簡單地理解：一個響應式網站＝手機網站＋pad端網站＋PC網站。具體的實現方式由多方面決定，包括彈性網格、彈性圖片、CSS媒體查詢（media query）的使用等。
彈性網格（flexible grids）
可基於屏幕解析度擴展或拉伸內容。
彈性圖片（flexible grids）
在小屏幕上可縮小尺寸，並可擴展大最大尺寸以支持大屏幕。
媒體查詢（media queries）
是放在站點HTML和樣式表中的代碼段，用來收集設備顯示能力的信息以支持多種形式的界面。
下面安徽碼農科技就給大家總結一下響應式網站的優缺點吧 。
響應式網站優點
1:用戶體驗友好
隨著電腦尺寸多元化，智能設備（pad/智能手機）普及化，在當下追求用戶體驗至上的時代（2016年），之前網站普遍使用固定的寬度（960px或1000px）逐漸滿足不了現在不同設備與不同解析度需求。在高解析度電腦寬屏顯示器上，兩邊留白過多。在手機上顯示，內容顯示過小，用戶為了看清楚，首先需要放大界面，再左右拖拖界面。響應式網站可以根據不同終端、不同尺寸和不同應用環境，自動調整界面布局、展示內容、內容大小，提供非常好視覺展示效果，一致性友好體驗。
2:SEO友好
由於響應網站在不同終端有友好的界面展示效果，用戶可以與網站一直保持聯系，比如URL不變積累分享；通過單一的URL地址收集所有的社交分享鏈接最佳化搜索用引擎。搜索引擎也在變得越來越聰明，它們足夠智能可以完成移動網站和桌面網站的連接。
3:多個網站只需一個後台即可完成全部網站維護，無需額外增加負擔。說到這里你也許會說不做響應式的網站，做個手機站也可以數據同步，一個後台。說得非常對，但是這只限於維護一般的新聞內容與產品等，並不是所有內容都可以一站同步。比如網站banner上與一些特定地方的圖片尺寸，就需要分兩次裁剪吧。
響應式網站缺點
1:對低版本瀏覽器兼容性不友好
對於老版本瀏覽器支持不好，這是一個致命的問題。老版本瀏覽器上打開響應式網站會經常出現圖片顯示不全，排版錯亂等情況。
2:靈活性有所欠缺
基於不同終端的設備屬性不同，對產品用戶體驗要求就會截然不同。內容比較多帶有功能性的網站不適合做響應式網站設計，如：電商類型網站，寬屏的pc端內容如果全部要在手機端進行展示，勢必導致手機端的界面非常長，需要根據手機端屬性進行重新信息框架設計，這樣對響應網站要求非常高，實現難度與成本非常高。但是大型網站為了提高用戶體驗，通常做法，把高解析度寬屏網站最小的響應尺寸響應到1024px，不再適配手機端，手機端重新設計開發一套手機網站，簡單理解為2.5響應，如：電商網站亞馬遜、Calvin Klein、Nike、視頻網站Youtube等。
3:速度可能會變慢
由於響應式頁面是同時下載多套CSS樣式代碼，可能在手機上就下載PC、Pad的冗餘代碼，導致文件變大，影響載入速度。不過CSS樣式的代碼佔用內存相對圖片來說不算大，所以如果前端編程處理得好前提之下，這就不會影響網站載入速度。
4:開發成本較高
這個價格預算問題也往往是大家最關心的一個問題，說到這里大家可能覺得奇怪，響應式網站只是一個網站，為什麼比手機站與電腦站分開做兩個要貴！主要原因是：
一、企業網站定製最重要的成本就是人力成本，響應式網站製作需要資深設計師與資深程序員。而獨立製作各版本只需要普通設計師和普通工程師即可，但是響應式網站開發則必須資深設計師和資深程序員才能搞定，所以導致非常大的區別。資深設計師與程序員與普通的對比，這個道理大家都懂得，所以響應式網站價格較高。
二、響應式網站需要注意的細節太多，比如一個普通的JS效果，需要考慮3-4個終端的區別，編寫的JS代碼兼容性要非常好，根據以往開發經驗，這樣的細節注意要比普通網站多3-5倍。細節注意多了，開發周期就比較久，工時就是這樣上來的。
三、市面上很多響應式網站往往是不考慮網速的，在移動端和PC端需要載入的頁面數據往往是一樣多，導致的結果是，如果用戶採用2G3G的網速，不但速度慢而且耗流量。一個完美的響應式網站不應該是這樣的，但是做到這點需要的技術難度確是非常高，所以這也導致成本增加。
溫馨提示 ：企業是否做響應式網站，取決於對自身網站的定位。若是一般的企業官網，網站內容較少，預算又充足，對網站頁面要求較高的客戶可考慮做響應式網站。
若是想做功能型網站，網站內容較多，擇需要電腦手機分開做。其實大家稍微注意一下就明白了。響應式真的那麼好，為什麼京東不做呢，天貓淘寶不做呢。一是技術實現太難，二是確實不適合做這些功能型網站。
4. web響應式網站怎麼做
Step1：信息架構，確定內容策略。
根據產品定位和用戶分析，交互設計師確定站點信息架構。（信息架構呈現方式有很多種，這不是本文重點，不詳述）。
這時候可以明確這個產品有多少頁面，每個頁麵包含多少內容，內容優先順序是什麼。很多產品包含N多頁面，每個頁面一一考慮響應式設計容易造成混亂且成 本巨大。所以下一步重要工作是分析頁面類型把頁面歸類。以玩客為例，可以把10多個頁面分成三類：列表類頁面、詳情類頁面、操作類頁面。
Step2：響應式移動框架
先說下為什麼第二步要先設計移動框架。移動優先是移動互聯網浪潮下應運而生的理念，由Luke Wroblewski最早提出。移動優先並不是指移動更重要，響應式設計理念里設備是同等重要的。它是指優先設計手機端的體驗，有三個原因：
手機讓設計專注，強迫你想清楚什麼信息是最重要的。因為手機屏幕小，每屏呈現的內容少；觸屏手機使用手指操作而非滑鼠這樣的精密設備來操作，對操 作有更高要求；手機使用場景更加豐富，很多場景用戶是缺乏耐心的，比如當你排隊看電影正在找手機上的電子票，馬上排到你了翻半天卻遲遲找不到那張票這是多 么令人崩潰的事情。
手機許多特性讓設計更強大。手機上的語音輸入、地理位置定位、豐富的手勢操作、越來越多感測器，手機交互比PC擁有更多可能性。從手機開始設計，讓你更早地思考如何發揮這些特性。
手機正在迅猛增長。手機即將超越PC，成為最主流的上網方式，這個趨勢是不可逆的。
從移動開始做設計對習慣了PC環境的設計師可能是一種挑戰，思考方式工作習慣都被迫做出改變。但這種改變必須去適應，因為用戶習慣在改變。
回正題，上一步已經把頁面歸類並確定每個頁面內容優先順序，現在接著分析每種類型頁面的導航、主體內容等框架結構，最終得出一份框架結構表。從玩客框 架結構看出，全局導航是所有頁面公共的，局部導航只有列表類頁面才有，詳情類頁面都有一個「頁面主人」信息，而關聯導航不是每個頁面都有。
Step3：響應式設計框架
根據手機端的框架拓展出平板和PC端框架。這是復雜產品實現響應式設計的關鍵步驟，它是讓眾多頁面有條理地響應起來的基礎。第一件事情是確定響應式 模式，即從手機到平板到PC，導航怎麼變化，頁面布局用哪種響應方式，根據內容優先順序如何調整模塊順序，等等。玩客在PC端以三欄布局為主，左邊欄作為局 部導航或者主人信息區，中間欄始終是頁面主體信息，當頁面需要關聯導航時統一放在右邊欄。
應式是一種設計理念與前端技術緊密結合的新興形態，鼓勵盡早進行跨職能溝通協作。交互確定響應式框架和柵格系統後，其他角色就可以同步開展工作 了。前端開始介入完成柵格和框架搭建，產出頁面基礎框架。視覺同步開始探索和定義視覺風格探索，制定視覺框架，產出風格關鍵詞、產品配色方案。整個過程需 要幾個角色不斷討論確定。
Step4：模塊設計
按照用戶體驗中的移動優先的原則應該先進行移動端的模塊細節設計，不過我們選擇了從PC端開始設計細節。因為PC端開發能夠充分暴露業務復雜度，項目團隊的設 計、開發、測試在PC環境下擁有成熟的工具和流程，從PC開始讓開發過程更順暢。所以個人認為移動優先是確定內容策略時應該遵循的理念，細節設計和開發過 程是否要移動優先，取決於產品定位和項目團隊情況。
響應式框架確定了頁面結構和響應模式，模塊設計這個過程開始完善所有信息排版和交互形式，這是交互設計師最熟練也是最耗時的工作。這個過程與傳統流程沒太大區別，只是心裡要不斷提醒自己，這個模塊不是只為這個設備設計，它在其它設備下會出問題嗎？
交互確定頁面模塊細節後可以抽取出產品用到的控制項、組件和公共模塊，現在視覺和前端開始做一件有別於傳統流程的事情。視覺根據前期定義的風格設計控組件和公共模塊的視覺效果，把它們拼成一個模擬的頁面，我們稱之為風格拼貼稿。前端再把風格拼貼稿里的控組件和公共模塊實現出來，統一維護一套組件規范代碼。
Step5：響應式模塊設計
PC端頁面模塊細節和風格拼貼稿完成後，剩下工作是拓展出平板和手機端的完整設計稿，前端產出全部響應式頁面代碼。進行響應式模塊設計時最需要關注的仍然是讓操作符合設備習慣，充分利用設備特性。
至此，一個全站響應式產品的頁面就陸續出來了。很多人認為響應式設計維護成本高的理由是一個頁面要同時設計多套設計稿。玩客這次經驗告訴我們，確定一套設計稿和柵格系統後再拓展出其它設備下的設計方案，工作量遠比想像中的低。
Step6：測試&討論&優化，提交開發
離大功告成還差最後一步，在真實設備下測試頁面效果，項目團隊討論並持續優化用戶體驗。
在提交開發之前需要盡早明確服務端響應（RESS） 的策略。服務端與客戶端結合是目前解決響應式頁面性能問題的最合理方案。哪些大圖片在移動設備下只需輸出小尺寸圖片？哪些內容在什麼設備下是不需要開發輸 出的？哪些可以減少輸出的數據數量？與開發團隊協作的響應式可以有效控制頁面文件大小，避免頁面成為移動設備上燒用戶流量的罪魁禍首。
測試通過後提交頁面進入開發環節。我們從可用性和可訪問性兩方面總結了一份響應式頁面測試checklist，測試要點包括但不限於以下內容。
5. 響應式網站是什麼建設一個響應式網站要多長時間網站建設出來能不能有效果
響應式網站是指頁面的設計開發都是根據用戶行為及設備環境進行相應的響應和調整。可以做到多種中斷訪問的自適應。從某種意義上來說，就是是兼容性更強，流暢度更好。
建設一個響應式網站一般我們建議通過極簡建站的在線建站系統來實現，多種行業模版可直接套用選擇，那麼只需要替換相應的圖片文字就能輕松實現網站的搭建，順利的話幾分鍾就可以做出一個相對簡單一些的頁面，但如果需要精細化一些，一般兩三天也就差不多可以完成。
類似極簡建站這種在線建站平台有很多，大多數都富含關鍵詞優化功能，一般我們只需要在後台設定相應的幾個網站關鍵詞，就能達到很好的一個排名效果，你也可以多方了解下！希望能幫到你。
6. 什麼是響應式網站
響應式網站大致包含五種類型：
1、背景大圖+簡單多列布局
背景大圖和簡單多列布局算的上是黃金搭檔。一方面，背景大圖可以充分吸引用戶的注意力，激發用戶的興趣，另一方面，多列布局將次級元素以簡潔、明了的方式呈現出來，更進一步讓用戶有點擊瀏覽的慾望。除此以外，使用這種布局模式的網站不僅看上去很乾凈、清爽，有足夠強勁的視覺表現力，而且還能夠突破斷點的限制，不管設備屏幕的大小，都為用戶展示充足的內容，供用戶瀏覽和探索，做到真正的響應式。盡管由於設備的差異，網站的具體布局可能會有所出入，比如使用固定寬或流體布局等。但網站總體布局模式是大同小異的，一般包括以下幾個部分：
導航菜單欄
背景大圖，附有文字標題
2~4個分欄，承載不同類別的信息
主要內容區域
頁腳
7. 響應式類型的網站怎麼樣，現在做這種類型的合適嗎
1:用戶體驗友好
隨著電腦尺寸多元化，智能設備（pad/智能手機）普及化，在當下追求用戶體驗至上的時代（2016年），之前網站普遍使用固定的寬度（960px）逐漸滿足不了現在不同設備與不同解析度需求。在高解析度電腦寬屏顯示器上，兩邊留白過多。在手機上顯示，內容顯示過小，用戶為了看清楚，首先需要放大界面，再左右拖拖界面。響應式網站可以根據不同終端、不同尺寸和不同應用環境，自動調整界面布局、展示內容、內容大小，提供非常好視覺展示效果，一致性友好體驗。
2:節省設計開發成本
相對需要開發電腦網站、pad網站、手機網站來說，響應式網站式節省設計開發成本的。從設計角度說，一般來說，響應式網站界面只需要設計兩套設計效果圖就行了，電腦端與pad端基本可以共用一套設計效果圖，手機端重新設計一套就可以了；從前端開發角度說，再不需要開發三套完成不一樣的前端代碼，只需要根據臨界點（如果是基於Bootstrap前端框架進行開發，它上面有明確說明，這個問題下回再和大家分享）為不同終端開發三套不同的css樣式；從後期維護角度來說，再不需要分別維護pc界面、pad界面、移動界面，專心維護一個網站即可。
3：SEO友好
由於響應網站在不同終端有友好的界面展示效果，用戶可以與網站一直保持聯系，比如URL不變積累分享；通過單一的URL地址收集所有的社交分享鏈接最佳化搜索用引擎。搜索引擎也在變得越來越聰明，它們足夠智能可以完成移動網站和桌面網站的連接。Google也建議優先採用響應式設計，因為無論是什麼網頁版本都是相同的HTML、相同的內容，Google最容易處理。
8. 前端響應式是怎麼回事
看看simplebs這個就明白了