如何理解響應式設計(rwd)
響應式網頁設計的概念最初是由 ethan marcotte 提出，從設計的角度引領我們思考：為什麼一定要為每個使用者分別做一套設計方案呢？是否可以有一種設計能夠根據不同裝置環境自動響應以及調整顯示？特別是隨著移動網際網路的飛速發展，響應式 web 設計不僅僅是關於螢幕解析度自適應以及自動縮放的等等，它更像是一種對於設計的全新思維模式 - 響應是雙方的，是互動的過程，在這個過程中設計師要考慮裝置的效能、dom 節點數量、螢幕大小等等。
響應式產品設計
響應式設計是從產品角度來進行的設計，在這個階段我們需要產品經理、互動設計師、設計師以及工程師共同介入了。我們需要打破傳統的思維模式去思考設計，從純粹傳統的web向移動應用過度。第一步需要有明確的資訊架構，來從最小顯示屏的移動裝置做產品設計，在移動裝置中拋棄更多的使用干擾，保證核心 功能的最優體驗；同時互動與設計師的介入處理如何把模組設計的更小更有彈性，並初步確定設計風格、設計框架等方案；而工程師需要在產品經理與設計師確定的方案中進行**測試，充分利用不同裝置獨有的特性並進行框架搭建。
在設計階段，線框圖和原型圖是必須的，而好的線框圖和原型工具會讓你更加專注於互動和功能。希望下面的工具能夠幫你為客戶和團隊設計出優秀的作品。
桌面端
axure：在功能全面強大和方便易用上盡可能做到了較好的綜合平衡。支援業務流程圖。具備一定的頁面流程圖製作能力(可用頁面快照實現)；具備一定 prd 能力。
balsamiq：專注草圖，素描風格。
web 端
proto.io：在互動設計上有突出表現。組、容器、滾動區的轉換有特色。可通過外掛程式匯入 sketch 檔案。
uxpin：在功能和便利性上有較好的平衡。具備一定的 prd 能力(有「ux文件」模板協作支援 prd)。可通過外掛程式匯入 sketch 檔案。
響應式設計中的介面設計
對於介面設計，在以前的設計中更多是針對桌面產品的，設計可能就是乙個尺寸，每個模組的位置比較固定，但是在響應式設計中，這些東西就改變了，設計師需要根據產品的需要設計多個版本的設計，在這些不同的版本中，模組 a 在1024的寬度下，可能會是黑色背景，但是到了768下面可能會變成白色背景，實現了在不同寬度的不同展現。
響應式設計針對**查詢的斷點
從傳統的設計角度，可以通過**查詢(media query)的方式改變網頁的布局，比如在固定的寬度下(也就是所稱作的斷點)改變布局。在以往設計更習慣的思維是針對某些裝置(比如桌面、平板電腦、手機)的資料來設定斷點，比如1024 對應桌面、768對應pad、480 對應手機，但實際上，這些東西是靠不住的，因為這些螢幕尺寸會根據時代的發展不斷的變化。
但是響應式設計不應該只針對某些特定大小的裝置，設計過程中需要的是乙個區間值，而不是將某一解析度對應一種裝置。因此在設計過程中應該根據內容的需要進行設定，設計師需要尋找乙個臨界點—即當視覺效果開始不符合人們的審美或影響了內容獲取時對應的值。
響應式設計在互動上有那些不同
在響應式設計中，對於互動方式的設計需要進行更加全面的考慮。設計師不僅要考慮以前桌面使用者的使用習慣，也必須兼顧不同尺寸的手持裝置。比如大家在 pc 上習慣使用的浮層在某些小尺寸的裝置上就沒法使用了。而且一些響應區域小的鏈結也不方便使用手指來操作，因此設計師可以做到」求同存異」。比如設計師可以根據螢幕的尺寸，來決定是否使用浮層、或者增大操作區域、或者」整齊劃一」。為了方面讓設計過程更加輕鬆，在這裡特別推薦一款簡單易用的原型圖設計工具 mockplus，方便快速進行原型圖的建立以及互動的實現。
axure網頁預覽 響應式網頁設計指南
如何理解響應式設計 rwd 響應式網頁設計的概念最初是由 ethan marcotte 提出，從設計的角度引領我們思考 為什麼一定要為每個使用者分別做一套設計方案呢？是否可以有一種設計能夠根據不同裝置環境自動響應以及調整顯示？特別是隨著移動網際網路的飛速發展，響應式 web 設計不僅僅是關於螢幕解析...
響應式網頁
1.將width改為max width，來適應螢幕的變動來改變自身寬度等。其他亦然。查詢，參考部分bootstarp框架 當頁面大於1200px時，大螢幕，主要顯示pc端 media min width 1200px 在992 和1199 畫素之間的螢幕裡，中等螢幕，解析度低的pc media mi...
響應式網頁
做響應式網頁需要注意 1.使用百分比來代替固定長度 2.當你需要在較大解析度下得到固定寬度時，使用max width而不是width，因為他可以適應較小的解析度 3.不要忘記給替換元素 eg.img,object,video,iframe 設定乙個max width，值為100 4.背景圖鋪滿整個容...