因為本人之前並沒有接觸過響應式設計，在項目開始前便惡補了一些響應式的基礎知識。理論性資料網上眾多，為了使各位對響應式有初步印象和認知，我在這裏只做簡單描述，各位若想要更全面深入的了解可自行百度。

（1）頁面的設計和開發應當根據用戶行為以及設備環境（系統平臺、屏幕尺寸、屏幕定向等）進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和布局、圖片、css media query的使用等。無論用戶正在使用筆記本還是iPad，我們的頁面都應該能夠自動切換分辨率、圖片尺寸及相關腳本功能等，以適應不同設備；換句話說，頁面應該有能力去自動響應用戶的設備環境。響應式設計使用戶在不同設備上訪問網站時都能獲得最佳的瀏覽體驗。[來自百度百科]

（2）響應式網頁設計就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這樣，我們就可以不必為不斷到來的新設備做專門的版本設計和開發了，響應式設計不僅降低了開發成本，而且一套後臺維護管理一個網站版本，大大減少了運營成本。

網上關於響應式網站設計的知識分享確實“海量”，但要麽偏向理論，要麽偏向技術，項目實操經驗分享少之又少。這也是為什麽我要寫這篇文章，就是為了今後再有產品經理做響應式項目時，有經驗可循。

先說我們的情況。

我在設計原型時確實沒有想到原型出幾套的問題，出於對PC端和手機端的格外重視，我原型也對應這兩個主流出了兩套，評審時大家也沒有任何異議。

後面故事就來了。

設計只出了一套PC端的設計圖便交付了，理由是響應式對文字和圖片的處理基本采用等比縮放的處理方法，所以只需要一套PC端的設計圖，到了其他尺寸只需要前端看著等比處理即可，無需再出設計圖。

在我淺薄的認知和可憐的項目經驗裏，並沒有關於響應式網站設計應該出幾套設計圖的定義，我只能求助百度和其他產品/前端同事，百度基本無果，同事給出的意見是出一套PC圖即可，其他的由前端自行處理。評審時前端也沒有就出幾套設計圖給出明確要求，故，我也默認了此說法。

等前端動工，便開始頻繁質問我：你只給了PC端設計圖，那其他屏幕尺寸時，我怎麽做啊。我自己決定不了，屏幕過渡時頁面布局你們也得給出來，前端都是根據設計圖來的，反正設計圖有什麽我就做什麽。

前端反應激烈，態度強硬，脾氣火爆，我意識到問題有些嚴重，便趕緊召集設計和前端開會討論，最終結果是前端先自行對頁面進行響應式處理，如需要設計出圖，那麽設計根據前端要求出圖，在非技術難點問題上要產品下決策。

因為工期緊張，大家各讓一步便開始緊鑼密鼓的忙活起來。所幸大家工作態度不錯，都希望項目能夠按時按質交付完成，這場小插曲便過去了。也確實辛苦前端妹子。

通過這次中場討論，我也了然這個問題的答案：

（1）如果網站版塊設計規整，柵格布局，圖文內容簡單，交互簡潔，那麽就只要產品經理出一套PC原型，設計出一套PC設計圖即可。前端完全可以根據響應式基本原則，針對不同屏幕尺寸調整布局。至於內容或模塊的刪減，需要產品決定，產品應提前告知前端。建議產品畫出線框圖，並在線框圖上標明響應到ipad尺寸和手機端尺寸時頁面如何布局，內容如何刪減。這種最典型的適用於於單頁網站。

（2）再稍微復雜一些的頁面，比如我們的網站，包含圖文、視頻、報名表單、通欄banner等，並且對移動端的導航樣式有特殊要求，這些都需要產品提前規劃好並告知前端。同時只需要出PC端設計圖和手機端的線框圖，前端基本可以參照設計圖和線框圖去做。

拿我們的項目舉例，對移動端有有特殊要求：

（3）但如果網站布局和交互復雜，內容信息過重，建議產品和設計根據PC尺寸、IPAD尺寸和手機尺寸分別出三套原型和設計圖。這樣前端基本知道過渡尺寸時都如何處理，也知道在不同尺寸時響應的重點是什麽，節約溝通和研發成本。

例如：

https://cloud.tencent.com/act/mid-year?fromSource=gwzcw.930926.930926.930926

我們的網站改版上線後，響應式效果比較理想，最著重向運營強調的有以下兩點：

（1）圖片問題：banner及寬度較長的通欄圖片，需要出兩套，一套PC、一套移動。

因為響應式不在前臺對圖片尺寸進行固定，故運營上傳的圖片必須經過處理，確保圖片尺寸正確，上傳完畢後自行到前臺檢查；尺寸一旦不統一，便會出現錯位。

（2）視頻問題：視頻存儲在我們自己的後臺，不使用騰訊視頻或其他視頻播放器，若想要視頻響應，需要確定上傳的視頻為MP4格式。

（1）在做響應式設計時，提前規劃清楚響應各屏幕尺寸時要刪減的內容和頁面布局，建議產品經理畫出PC、iPad和手機尺寸的線框圖，這樣直觀明了，前端不用來回確認，節省開發時間。當然了，如果是有充分的設計/開發資源和充足的項目時間，可以給出以上三個尺寸的設計圖。

（2）產品經理要充分理解和尊重設計與研發的意見和建議，但是在關鍵點上由產品下決定，在非技術難點上產品要給出解決方案。通過這次項目，我的統籌和決策能力都與明顯提升。

（3）由於產品經理缺乏此類項目的專業知識和項目經驗，沒有做到合理統籌安排，設計和前端職責劃分不清晰，從而造成了一些爭端，這也是實操該項目給我的最大教訓。

【經驗分享】響應式網站項目實操過程中的那些事兒