響應式前端開發問題--如何選擇各種大小屏幕尺寸？

現在要設計一個響應式前端， 請各位大俠請教我，目前主流的屏幕尺寸有哪些？響應式開發的時候怎麼分開屏幕尺寸？按照什麼尺寸標準來開發？ 謝謝

主流平板電腦尺寸，安卓智能手機尺寸，iphone4,5,6,6+等屏幕尺寸，PC端顯示器尺寸。

---

響應式設計的時候，斷點的設置，應該按內容設置斷點，而不是按設備寬度設置斷點，所以無需考慮成千上萬的設備。

我寫過一篇關於 響應式設計的性能優化 的文章，將其中關於斷點的內容摘抄部分。

普遍的響應式設計一般會要求按照主流設備的屏幕解析度設置斷點。隨著現在手機更新迭代越來越快，屏幕解析度更是參差多態。現在設置的斷點，可能一年半載就已不適應. 所以與其讓「屏幕解析度」確定斷點，不如讓「內容」確定斷點。

引用 Responsive Design Workflow 作者 Stephe Hay 的話來說：

Start with the small screen first, then expand until it looks like

shit. Time for a breakpoint!

大概意思是，從你需要適配的最小屏幕寬度開始測試，慢慢地拉伸，當你發現頁面像坨屎的時候，一個新的斷點就確定了。

接下來繼續反覆拉伸，確定新的斷點，直到你所需要適配的最大屏幕寬度為止。最後，你會發現通過 按內容設置斷點 所使用的斷點數量遠比 屏幕解析度確定斷點 要少。

---

如果題主想問的是設備查詢時候，應該設置什麼範圍，我給個截圖

來源：全局 CSS 樣式 · Bootstrap 中文文檔

關於設備兼容這種東西，如果公司不提供足夠多的設備種類的話，只能是用瀏覽器模擬，移動端適配實際是很痛苦的事；

參考http://zhuanlan.zhihu.com/winter/19883309

最後還有一篇手機淘寶的flexible設計與實現

---

可以用Chrome開發者工具模擬各種主流設備，如圖：

區分屏幕尺寸用 Media Queries，用法如下：

/* 當瀏覽器的可視區域小於980px */
@media screen and （max-width： 980px） {

}
/* 當瀏覽器的可視區域小於650px */
@media screen and （max-width： 650px） {

}


響應式就是在改變屏幕寬度時動態調整樣式，沒有尺寸標準。

---

為什麼不使用chrome的F12呢，作為前端開發者F12不是應該最需要熟練掌握么，F12下面不是有設備模擬器可以模擬各種解析度的么…

---

Chrome 上的插件 Responsive Web Design Tester 絕對能幫到你

個人覺得絕對是前端好工具.

---

之前折騰過，屏幕尺寸和解析度在響應式設計中需要完全忽略

影響頁面的屬性是device-width，而iphone 3456，儘管解析度、屏幕大小各不相同，但豎屏時的device-width都是無一例外的320px，橫屏時iphone 4是480px，56理應大一些

---

推薦閱讀：