相信很多網頁設計師，對響應式設計還存在很多迷惑。設計稿尺寸？解析度？CSS樣式？等等，這是很正常的，網頁發展迅速，電子裝置層出不窮，造成了設計工作量大增。一會兒你要相容PC，一會兒要相容安卓，一會兒要相容蘋果，一會要相容平板，一會要相容智慧手錶，感覺人都要崩潰了。然而，事實確實如此，單純的網頁介面設計，我們無需考慮太過複雜的響應式，因為響應式靠的還是前端工程師嘛！但是我們可不能忽略這個，如果你是一個團隊，弄不好你會被前端開發人員砍死，如果前端開發人員是個妹紙，說不定你會把人家弄哭。之前我也有一套免費的公開課，詳細講解了響應式和尺寸、解析度等問題，但是還有很多不完善和不準確，又經過了一年多的打磨，我這裡又重新整理歸納了更好的資料和使用技巧。

好了，廢話不多說，設計網頁介面，定下一個標準尺寸，包括響應式尺寸，其實很容易，用Photoshop CC高版本，可以在直接建立檔案時選擇不同裝置的尺寸參考，增加了設計的準確性。

當然，如果你不使用預設的Photoshop尺寸，可以參看下面的表格進行尺寸設定，表格中列出的尺寸是常用於網頁設計中的尺寸參考，並不是全部。響應式設計對於初學者，甚至對於經驗不多的在職人員，也是一個很複雜，學起來相對不容易的知識。學習基本的響應式規範容易，但是實際使用到專案中，就不是那麼得心應手了。這是一個過程，你如果學習下面的表格比較吃力，請不要操之過急，多自己去實踐，慢慢找出響應式斷點的意義。下面的資料並不是固定使用在任意專案中，具體的響應式斷點數值，還需要根據具體的專案設計方案，根據專案使用的前端開發框架考慮。

好了，這篇文章的核心來了，設計是小事，真正的大事，在於前端開發如何讓你的設計稿支援響應式，這就需要根據網際網路的現狀，根據全球使用各種裝置的情況，根據各種裝置的尺寸解析度來進行判斷。有很多文章，很多時候，要完完全全按照標準相容所有裝置，工作量是非常龐大的，我相信每個開發者都吃不消，況且開發者還要考慮瀏覽器相容性，更是難上加難。我自己總結的兩個表格，它們是我自己比較常用的參考值，同時也參考了一些W3C一些權威的數值，包含了尺寸，解析度，CSS的媒體查詢程式碼段等核心數值。我自己在寫前端的時候，也不斷摸索如何即做到相容，又滿足多種主流裝置的螢幕尺寸，還要減輕前端開發的工作量，提高前端開發響應式的效率。

你去Google或者百度一下，你可以找到很多響應式的CSS程式碼，複雜的有，簡單的有，標準不一的也有，其實我也經常去尋找資料學習，很是頭疼。但是最終你學到的知識，都要實踐到具體專案中，你才能知道什麼最好用，什麼最合適使用，我儘量本著下面的原則整理這些CSS程式碼：

• - 減輕前端開發負擔
• - 能最大限度相容各主流裝置和PC電腦
• - 程式碼量儘量少，便於更清晰的思路
• - 相容全球主流框架Bootstrap

這是很漫長的工作，我積累了很久，實踐了很多，開發過的支援響應式的框架或者外掛，所以在這裡我做一個分享，特別是CSS程式碼段，相信對每一個前端開發者都會有所幫助，你不一定按照我的參考去做，但是你可以體會它們的意義。下面就看一看我常用的前端開發時用到的響應式程式碼(當網站使用或者未使用前端框架時用於自定義樣式表的對照參考)：

a) 常用於圖片流


@media all and (max-width: 1690px) { ... }
@media all and (max-width: 1280px) { ... }
@media all and (max-width: 980px) { ... }
@media all and (max-width: 736px) { ... }
@media all and (max-width: 480px) { ... }


b) 常用於稍微複雜的基本響應

@media all and (min-width:1200px){ ... }
@media all and (min-width: 960px) and (max-width: 1199px) { ... }
@media all and (min-width: 768px) and (max-width: 959px) { ... }
@media all and (min-width: 480px) and (max-width: 767px){ ... }
@media all and (max-width: 599px) { ... }
@media all and (max-width: 479px) { ... }




c) 基於Bootstrap 3.x 全球主流框架


@media all and (max-width: 991px) { ... }
@media all and (max-width: 768px) { ... }
@media all and (max-width: 480px) { ... }



d) 基於Bootstrap 4.x 全球主流框架


@media all and (max-width: 1199px) { ... } 
@media all and (max-width: 991px) { ... } 
@media all and (max-width: 768px) { ... } 
@media all and (max-width: 575px) { ... }



e) 基於Material Design Lite (MDL) 材料設計框架

@media all and (max-width: 1024px) { ... } 
@media all and (max-width: 839px) { ... } 
@media all and (max-width: 480px) { ... }


f) 常用於Retina螢幕圖片適配(@2x)

@media(-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:3/2),(min-resolution:1.5dppx){ ... }