『壹』 web響應式網站怎麼做
Step1：信息架構，確定內容策略。
根據產品定位和用戶分析，交互設計師確定站點信息架構。（信息架構呈現方式有很多種，這不是本文重點，不詳述）。
這時候可以明確這個產品有多少頁面，每個頁麵包含多少內容，內容優先順序是什麼。很多產品包含N多頁面，每個頁面一一考慮響應式設計容易造成混亂且成 本巨大。所以下一步重要工作是分析頁面類型把頁面歸類。以玩客為例，可以把10多個頁面分成三類：列表類頁面、詳情類頁面、操作類頁面。
Step2：響應式移動框架
先說下為什麼第二步要先設計移動框架。移動優先是移動互聯網浪潮下應運而生的理念，由Luke Wroblewski最早提出。移動優先並不是指移動更重要，響應式設計理念里設備是同等重要的。它是指優先設計手機端的體驗，有三個原因：
手機讓設計專注，強迫你想清楚什麼信息是最重要的。因為手機屏幕小，每屏呈現的內容少；觸屏手機使用手指操作而非滑鼠這樣的精密設備來操作，對操 作有更高要求；手機使用場景更加豐富，很多場景用戶是缺乏耐心的，比如當你排隊看電影正在找手機上的電子票，馬上排到你了翻半天卻遲遲找不到那張票這是多 么令人崩潰的事情。
手機許多特性讓設計更強大。手機上的語音輸入、地理位置定位、豐富的手勢操作、越來越多感測器，手機交互比PC擁有更多可能性。從手機開始設計，讓你更早地思考如何發揮這些特性。
手機正在迅猛增長。手機即將超越PC，成為最主流的上網方式，這個趨勢是不可逆的。
從移動開始做設計對習慣了PC環境的設計師可能是一種挑戰，思考方式工作習慣都被迫做出改變。但這種改變必須去適應，因為用戶習慣在改變。
回正題，上一步已經把頁面歸類並確定每個頁面內容優先順序，現在接著分析每種類型頁面的導航、主體內容等框架結構，最終得出一份框架結構表。從玩客框 架結構看出，全局導航是所有頁面公共的，局部導航只有列表類頁面才有，詳情類頁面都有一個「頁面主人」信息，而關聯導航不是每個頁面都有。
Step3：響應式設計框架
根據手機端的框架拓展出平板和PC端框架。這是復雜產品實現響應式設計的關鍵步驟，它是讓眾多頁面有條理地響應起來的基礎。第一件事情是確定響應式 模式，即從手機到平板到PC，導航怎麼變化，頁面布局用哪種響應方式，根據內容優先順序如何調整模塊順序，等等。玩客在PC端以三欄布局為主，左邊欄作為局 部導航或者主人信息區，中間欄始終是頁面主體信息，當頁面需要關聯導航時統一放在右邊欄。
應式是一種設計理念與前端技術緊密結合的新興形態，鼓勵盡早進行跨職能溝通協作。交互確定響應式框架和柵格系統後，其他角色就可以同步開展工作 了。前端開始介入完成柵格和框架搭建，產出頁面基礎框架。視覺同步開始探索和定義視覺風格探索，制定視覺框架，產出風格關鍵詞、產品配色方案。整個過程需 要幾個角色不斷討論確定。
Step4：模塊設計
按照用戶體驗中的移動優先的原則應該先進行移動端的模塊細節設計，不過我們選擇了從PC端開始設計細節。因為PC端開發能夠充分暴露業務復雜度，項目團隊的設 計、開發、測試在PC環境下擁有成熟的工具和流程，從PC開始讓開發過程更順暢。所以個人認為移動優先是確定內容策略時應該遵循的理念，細節設計和開發過 程是否要移動優先，取決於產品定位和項目團隊情況。
響應式框架確定了頁面結構和響應模式，模塊設計這個過程開始完善所有信息排版和交互形式，這是交互設計師最熟練也是最耗時的工作。這個過程與傳統流程沒太大區別，只是心裡要不斷提醒自己，這個模塊不是只為這個設備設計，它在其它設備下會出問題嗎？
交互確定頁面模塊細節後可以抽取出產品用到的控制項、組件和公共模塊，現在視覺和前端開始做一件有別於傳統流程的事情。視覺根據前期定義的風格設計控組件和公共模塊的視覺效果，把它們拼成一個模擬的頁面，我們稱之為風格拼貼稿。前端再把風格拼貼稿里的控組件和公共模塊實現出來，統一維護一套組件規范代碼。
Step5：響應式模塊設計
PC端頁面模塊細節和風格拼貼稿完成後，剩下工作是拓展出平板和手機端的完整設計稿，前端產出全部響應式頁面代碼。進行響應式模塊設計時最需要關注的仍然是讓操作符合設備習慣，充分利用設備特性。
至此，一個全站響應式產品的頁面就陸續出來了。很多人認為響應式設計維護成本高的理由是一個頁面要同時設計多套設計稿。玩客這次經驗告訴我們，確定一套設計稿和柵格系統後再拓展出其它設備下的設計方案，工作量遠比想像中的低。
Step6：測試&討論&優化，提交開發
離大功告成還差最後一步，在真實設備下測試頁面效果，項目團隊討論並持續優化用戶體驗。
在提交開發之前需要盡早明確服務端響應（RESS） 的策略。服務端與客戶端結合是目前解決響應式頁面性能問題的最合理方案。哪些大圖片在移動設備下只需輸出小尺寸圖片？哪些內容在什麼設備下是不需要開發輸 出的？哪些可以減少輸出的數據數量？與開發團隊協作的響應式可以有效控制頁面文件大小，避免頁面成為移動設備上燒用戶流量的罪魁禍首。
測試通過後提交頁面進入開發環節。我們從可用性和可訪問性兩方面總結了一份響應式頁面測試checklist，測試要點包括但不限於以下內容。
『貳』 什麼是響應式網頁設計使用了哪些技術有什麼特點
響應式web設計(responsive
web
design)的理念是：
頁面的設計與開發應當根據用戶行為以及設備環境(系統平台、屏幕尺寸、屏幕定向等)進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和布局、圖片、css
media
query的使用等。無論用戶正在使用筆記本還是ipad，我們的頁面都應該能夠自動切換解析度、圖片尺寸及相關腳本功能等，以適應不同設備；換句話說，頁面應該有能力去自動響應用戶的設備環境。響應式網頁設計就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這樣，我們就可以不必為不斷到來的新設備做專門的版本設計和開發了。
『叄』 做響應式web 頁面怎麼設計
響應式Web設計的方法
介紹完響應式Web的背景和概念之後，是時候該介紹具體的實現方法了，其實響應式Web設計的方法很簡單，就是利用CSS3的媒體查詢Media Queries和Viewport來解決問題的。
首先我們一起來看看Media Queries，這里我只會對其做一個簡單的列舉介紹。
通過媒體查詢的設置，我們可以根據屏幕寬度、屏幕方向等各個屬性來載入不同場景下不同的CSS文件來渲染頁面的視覺風格。具體的使用方法有以下兩種：
1、通過link標簽：
<link rel="stylesheet" type="text/css" media="screen and (max-width: 479px)" href="testcssbywidth1.css" />
示例代碼代表當當前屏幕寬度小於479px的時候，載入testcssbywidth1.css文件來渲染頁面。
2、CSS中直接設置：
@media screen and (max-width:479px) {
/* 具體的CSS屬性設置 */
}
對於Media Queries的一些常用屬性，只對常用的幾個做一個簡單列舉說明，其他的屬性請各位自行查閱相關資料：
width：描述終端設備顯示區域的寬度，接受max/min的前綴；
height：描述終端設備顯示區域的高度，接受max/min的前綴；
device-width：描述終端設備屏幕的寬度，接受max/min的前綴；
device-height：描述終端設備屏幕的高度，接受max/min的前綴；
orientation：描述終端設備處於橫屏還是豎屏的狀態，取值分別為：landscape/portrait。
當我們調整瀏覽器大小的時候，上面通過媒體查詢屬性的操作就可以完成響應式Web設計的工作，但是這卻不能滿足移動終端的瀏覽器，因為移動瀏覽器默認頁面是為寬屏幕設計的，所以會把他縮小來適應小屏幕，但是終端設備卻無法識別正確的寬度，所以光靠媒體查詢是解決不了移動終端設備的響應式Web設計的
『肆』 如何建設一個響應式網站 只需五個步驟
響應式網站設計（Responsive Web design）的理念是：頁面的設計與開發應當根據用戶行為以及設備環境（系統平台、屏幕尺寸、屏幕定向等）進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和布局、圖片、CSS media query的使用等。無論用戶正在使用筆記本還是iPad，我們的頁面都應該能夠自動切換解析度、圖片尺寸及相關腳本功能等，以適應不同設備；換句話說，頁面應該有能力去自動響應用戶的設備環境。響應式網頁設計就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這樣，我們就可以不必為不斷到來的新設備做專門的版本設計和開發了。
『伍』 《響應式Web設計HTML5和CSS3實戰》pdf下載在線閱讀，求百度網盤雲資源
《響應式Web設計》（Ben Frain）電子書網盤下載免費在線閱讀
資源鏈接：
鏈接：
書名：響應式Web設計
作者：Ben Frain
譯者：王永強
豆瓣評分：7.3
出版社：人民郵電出版社
出版年份：2013-1-1
頁數：231
內容簡介：
隨著iPad mini的發布，又一個新的屏幕尺寸誕生了。用不著全面統計，你就會發現移動互聯網時代眾多的屏幕規格，從智能手機的3、4、5英寸，到平板電腦的7、8、9、10英寸，再到筆記本和台式機的13至30英寸，絕非目前單一的固定或流式布局所能應付。於是，響應式設計應運而生，而且它也將成為移動互聯網時代前端設計與開發人員的一門必修課。
本書堪稱學習響應式Web設計的難得佳作。它不僅全面、細致、圖文並茂地介紹了響應式設計相關的技術，比如媒體查詢、流式布局、彈性媒體和彈性字體等，還把近幾年來Web設計領域公認的最佳設計理念有機地融入到了實例當中，比如移動先行（Mobile First）、漸進增強、平穩退化、無障礙設計等。更加難得的是，本書以設計跨屏幕的網頁（響應式設計）為出發點，以點帶面，把如今Web設計領域兩大標準的最新版本HTML5和CSS3也納入其中，讀者在掌握先進設計方法的同時也能掌握最新的設計技術（比如使用新的HTML5結構化語義標記、嵌入媒體、響應式視頻，以及CSS3的新選擇器、特效、過渡、變形和動畫等），從而可以免除重復學習新標准之苦，讓自己一步跨入Web設計領域的最前沿。無論你想學習響應式Web設計，還是學習HTML5和CSS3的實際應用，本書都能滿足你的需要，是毋庸置疑的明智之選。
說到底，響應式Web設計並非一門獨立的技術，而只是現有技術的一個組合應用。只要有一點HTML和CSS基礎的讀者都能順利地掌握它。對於中、高級的前端設計和開發人員，翻閱本書也有助於理清自己的知識脈絡，對這個新的設計理念獲得更全面、深入的理解和把握。
習慣移動閱讀的讀者，可訪問圖靈社區，購買本書電子版：http://www.ituring.com.cn/book/1055
作者簡介：
Ben Frain是一名具有十多年經驗的網頁設計師和前端工程師，直接與世界各地的客戶和設計機構並肩工作。同時他還是一名技術記者，定期為一些關注Mac平台、前沿科技、網頁設計和航空技術的刊物撰稿。
在此之前，他曾是一名懷才不遇的（而且謙虛謹慎的）電視演員，畢業於索爾福德大學的媒體與表演專業。他寫了四部（自認為）同樣被低估的劇本，而且始終心懷能賣出一部的信念（盡管不像最初那麼強烈了）。
工作之餘，在身體（和妻子）允許的情況下，他喜歡玩室內足球。 他的個人網站是www.benfrain.com，Twitter地址是twitter.com/benfrain。
『陸』 web前端開發教程（2）什麼是響應式
就是你的頁面在不同尺寸下都能有合適的狀態，盡量不出現滾動條，比如bootstrap下寫的東西在pc端，pad端，手機端都有不同的顯示，但是頁面並不會亂，當然也可以用百分比，讓頁面的寬度與瀏覽器寬度成比例縮放
『柒』 網頁設計中響應式具體怎麼實現
眼下，幾乎每個新客戶都希望他們的網站可以有專門的移動設備版本。最完美的情況吶，就是為iPhone、iPad、黑莓、Kindle……各自打造一款——頁面解析度還必須兼容任何設備。誰知道未來5年內我們還需要為多少新發明的設備設計開發不同版本的頁面？這種瘋狂什麼時候算個頭？
在Web設計和開發領域，很快的，我們將會無法跟上設備與解析度革新的步伐。對於多數網站來說，為每種新設備及解析度創建其獨立的版本根本就是不切實際的；結果就是，我們將會贏得使用某些設備的用戶群，而失去那些使用其他設備的用戶。不過，或許會有另外一種方式，可以幫助我們避免這種情況的發生。
響應式Web設計(Responsive Web design)的理念是，頁面的設計與開發應當根據用戶行為以及設備環境(系統平台、屏幕尺寸、屏幕定向等)進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和布局、圖片、CSS media query的使用等。無論用戶正在使用筆記本還是iPad，我們的頁面都應該能夠自動切換解析度、圖片尺寸及相關腳本功能等，以適應不同設備；換句話說，頁面應該有能力去自動響應用戶的設備環境。這樣，我們就可以不必為不斷到來的新設備做專門的版本設計和開發了。
『捌』 web開發需要學習什麼
首先對於Web前端初學者而言，HTML和CSS是需要掌握的內容。
HTML稱為超文本標記語言，是一種標識性的語言。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。
CSS層疊樣式表是一種用來表現HTML或XML等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。 CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字型大小樣式，擁有對網頁對象和模型樣式編輯的能力。
綜合來看，通過學習HTML和CSS主要是為了實現各終端頁面布局，但是現在為了提升用戶界面的體驗，越來越多的產品更加註重交互效果的展示，那麼提到交互效果就離不開JavaScript。JavaScript是一種屬於網路的腳本語言,已經被廣泛用於Web應用開發,常用來為網頁添加各式各樣的動態功能,為用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來實現自身的功能的。
為了在實際開發中代碼編寫的更加簡潔、規范，那麼就需要Web開發人員能夠熟練的使用前端框架。前端框架一般指用於簡化網頁設計的框架，這些框架封裝了一些功能，比如HTML文檔操作，各種按鈕、表單控制項等，常用的前端框架有Bootstrap框架、React框架、Vue框架、Angular框架等。
希望我的回答能幫到你，望採納！！
『玖』 什麼是響應式web設計
響應式Web設計是在開發和設計網站過程中產生的一種方式，它的目的是讓內容布局能隨用戶使用顯示器的不同而變化。再明確點說，這種設計概念，就是讓原本1292像素寬，4欄的內容，能夠很好地顯示在1025像素寬的用戶屏幕上，同時還能自動簡化成2欄。當然，讓它很好的適應智能手機和其他種類電腦的屏幕也就成了水到渠成的事了。這種特殊的設計形式就被成為「響應式Web設計」。
響應式Web設計的優點：可以兼容所有尺寸的屏幕，隨著手持設備（手機）屏幕尺寸繁多，也有很好的兼容性；而且開發一次，pc版和觸屏版，手機版融合為一；
響應式Web設計的缺點：對前端工程師要求比較高，它的屏幕兼容要求前端工程師對各種瀏覽器差異性了解比較多，對於大數據展示的門戶站點，如果用同一頁面，即時瀏覽器不崩潰，在手機上一個頁面，很難滑到最底部，帶來操作是十分不方便的，觸屏版和手機版對優質信息展示不足。
綜合優缺點：響應式Web設計在企業站點，微型或者小站還是可以用的，對於大中型站點不合適（尤其大信息量展示的）。