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

好了，廢話不多說，設計網(wǎng)頁界面，定下一個標準尺寸，包括響應式尺寸，其實很容易，用Photoshop CC高版本，可以在直接創(chuàng)建文件時選擇不同設備的尺寸參考，增加了設計的準確性。

當然，如果你不使用默認的Photoshop尺寸，可以參看下面的表格進行尺寸設置，表格中列出的尺寸是常用于網(wǎng)頁設計中的尺寸參考，并不是全部。響應式設計對于初學者，甚至對于經(jīng)驗不多的在職人員，也是一個很復雜，學起來相對不容易的知識。學習基本的響應式規(guī)范容易，但是實際使用到項目中，就不是那么得心應手了。這是一個過程，你如果學習下面的表格比較吃力，請不要操之過急，多自己去實踐，慢慢找出響應式斷點的意義。下面的數(shù)據(jù)并不是固定使用在任意項目中，具體的響應式斷點數(shù)值，還需要根據(jù)具體的項目設計方案，根據(jù)項目使用的前端開發(fā)框架考慮。

好了，這篇文章的核心來了，設計是小事，真正的大事，在于前端開發(fā)如何讓你的設計稿支持響應式，這就需要根據(jù)互聯(lián)網(wǎng)的現(xiàn)狀，根據(jù)全球使用各種設備的情況，根據(jù)各種設備的尺寸分辨率來進行判斷。有很多文章，很多時候，要完完全全按照標準兼容所有設備，工作量是非常龐大的，我相信每個開發(fā)者都吃不消，況且開發(fā)者還要考慮瀏覽器兼容性，更是難上加難。我自己總結(jié)的兩個表格，它們是我自己比較常用的參考值，同時也參考了一些W3C一些權威的數(shù)值，包含了尺寸，分辨率，CSS的媒體查詢代碼段等核心數(shù)值。我自己在寫前端的時候，也不斷摸索如何即做到兼容，又滿足多種主流設備的屏幕尺寸，還要減輕前端開發(fā)的工作量，提高前端開發(fā)響應式的效率。

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

- 減輕前端開發(fā)負擔

-?能最大限度兼容各主流設備和PC電腦

-?代碼量盡量少，便于更清晰的思路

-?兼容全球主流框架Bootstrap

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

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){ ... }

今天的分享就到這里，如果你喜歡我的分享，以后多多關注我的博客，我會不定時的總結(jié)分享一些干貨。希望對你有幫助：）

本文章同步發(fā)表于個人博客