這或許是最容易看懂的響應式知識科普
58UXD：響應式佈局這個名詞相信大部分設計師都不陌生，也能清楚知道它的基本呈現效果。但具體操作及與開發人員協作時，可能會遇到很多問題。尋找資料時發現大多數教程都是針對前端開發工程師打造的，並伴隨著許多晦澀難懂的專業名詞，讓人難以理解。
本篇文章希望能透過簡單明瞭的文字及圖文介紹，對我們設計響應式網站時經常會出現的問題進行清晰的說明。
場景一
1. 自適應與響應式都是什麼，又有什麼區別？
很多人會對響應式佈局和自適應式佈局產生混淆，確實他們的原理是非常相似的，都是檢測裝置，根據不同的裝置採用不同的 css。
至於他們的區別，有個很簡單的方法：同一個頁面在不同尺寸的螢幕上訪問時，看網址是否一樣，只有一個網址為響應式，有多個不同的網址為自適應。另外的區分點是：是否需要一對一的設計介面，是則為自適應。例如下圖：
△ 響應式與自適應的區別
2. 自適應與響應式選擇用哪個？
如果頁面功能不多，使用者互動少，不需要經常升級，響應式設計從運營的難易和維護的便利性考慮會更好，只要搞定網頁端，其他的也都搞定了。如果從頁面個性化多功能方面考慮，自適應設計更合適，因為這樣可以更好地為使用者提供功能全面，體驗更好的介面。例如功能複雜、使用者互動頻繁的網站、電商類網站，使用者量較大的網站選擇自適應更合適。
場景二
1. 做響應式頁面的條件是什麼？
響應式可以響應的前提有兩點：
頁面佈局具有規律性，必須建立靈活的網格基礎，元素寬高可用百分比代替固定數值；
網頁圖片必須是可伸縮的（頁面中圖片不固定寬/高）。
這兩點也是柵格系統本身的典型特點，所以利用柵格系統進行響應式的設計是順理成章的，也比較高效快捷，所以響應式與柵格化天生一對好搭檔。
網格是建立一個設計精良網站的關鍵。在《秩序之美-網頁中的網格設計》一書中，他解釋成功設計的目的是「在混沌中創造秩序」。現在比較流行的 8 點柵格，就是結合基準網格（8pt）和縱向柵格進行設計的。
2. 使用8點柵格進行設計的價值是什麼？
對於設計師：提升效率、減少決策，同時讓元素之間保持一種協調的節奏。
對於團隊：設計師和前端工程師之間更容易達成默契，前端可以較輕鬆地用肉眼丈量 8 的倍數。
對於使用者：同一品牌的產品保持高質量的一致性體驗，並且在自己的裝置上也不會出現模糊的半畫素偏移。
場景三
1。 常見的動態佈局方式有哪些？
A：包括固定佈局、流體佈局、混合佈局、響應式佈局。
佈局響應式時，模組結構如何變化呢？簡單介紹幾種常見的變化形式。
佈局不變，模組內容左右伸縮
這個頁面的響應效果比較簡單，等比縮放就好。
佈局不變，模組內容換行平鋪
有的時候為了節省頁面空間，將模組進行了平鋪設計。
佈局不變，模組內容增加減少
這是最常見的響應效果。
佈局改變，模組位置變換
本身為左右佈局的頁面，發生響應時左邊的導航挪到了上部，位置發生了變化。
佈局改變，模組內容數量改變
這是一個比較特殊的靈活佈局的網站，發生響應時，模組進行了隱藏刪減處理。
場景四
1. 什麼是媒體查詢？什麼是斷點？
這裡有一個新名詞，媒體查詢（media query），其實是實現斷點的一種方法，是前端工程師用簡單的方法，來獲取不同裝置的特徵，例如裝置的寬度/高度，視窗的寬度/高度，裝置的手持方向，解析度等。
這裡又一個名詞來了：斷點，用瀏覽器開啟一個響應式網站，檢查元素，右上角會顯示視窗當前的解析度，慢慢縮小視窗的寬度，找到頁面佈局的變化點，就是我們上面說到的斷點或者次斷點。
△ 上圖中每條線代表一個斷點
2. 應該如何選擇斷點？
斷點的設定一定是基於頁面具體內容，並參考網站使用者的裝置解析度資料。設計過程中在一定區間內拉昇或壓縮，已經無法用相同的佈局內容時，必須改變內容展現方式時，而產生的關鍵尺寸的節點。
需要注意的是，在選擇斷點時，不應選擇將斷點設定為與某些常見裝置寬度相同，而是應該確保常見裝置寬度能夠很簡單地落入到某一設計範圍之內。可以在各類裝置上對設計進行測試並以此來調整斷點。
那麼完全不考慮裝置嗎？不是的，裝置仍然很重要，只是不應首先考慮它們。在一開始最好是不要只考慮頁面設計在特定裝置上的顯示效果，而是應該從更通用的訪問裝置，比如手機尺寸、平板電腦尺寸及桌面顯示器尺寸去考慮它。
在設計中遇到的其他問題
如何解決icon放大造成的變形及模糊問題？
當你的產品做成響應式設計的時候，可能會遇到圖示在適應螢幕尺寸的時候拉伸或擠壓變形導致模糊，這個時候可以將圖示做成字型。
它的優點在於：
icon 是向量的，可以自由適應各種尺寸大小，不會模糊；
佔用空間很小，250 個圖示的字型只有不到 300K；
icon font 可控性更高，可以用程式碼去控制大小、顏色、透明度、特效等；
相容性高，甚至是低版本IE瀏覽器。
設計稿要怎麼設計，要做幾套？
設計幾套取決於這個網站你會設定幾個斷點，而設定多少個斷點，由網站的內容決定，設計師需要根據網站的實際內容找到合適的斷點，設法避免列間空白太寬或太窄的情況。
