響應式網頁設計斷點？爲什麼設計爲1280,1024,640？

Question

我在Photoshop中收到了三種不同分辨率的網站佈局：1280,1024和640像素寬。由於我在RWD方面的經驗有限，因此我希望更好地瞭解網頁設計師應如何考慮尺寸斷點，流動性等問題（撰寫本文時）。

我的具體問題，從這個項目而產生的：

1. 爲什麼設計師與這3個決議去，因爲該項目是一個典型的公司網站？
2. 一般來說，這些決議是最佳的，還是我應該問我們其他人？
   （難道1024，768，320更有意義？也許我應該尋找，而不是規範的「自然斷點？）
3. 我應該如何思考關於iPhone 3實施640佈局？。（@ 320像素）和4（@ 640像素）

感謝所有幫助

Answer 1

1. 這些似乎是較常見的景觀決議，1280是一個寬版的桌面，1024是普通臺式機/景觀平板電腦，以及640是景觀爲移動。就個人而言，我還沒有看到這些響應式框架的確切解決方案。

2. 我會給你2個很酷的響應式框架作爲參考。 Skeleton運行在3個基本級別：960像素+（桌面），768像素（平板電腦）和< 480像素（移動）。我認爲這些解決方案是非常好的解決方案，特別是如果您是新手，並且仍然習慣於使用像素。或者，您可以使用Goldilocks approach，它使用相同的原理（桌面，平板電腦，移動設備），但使用ems而不是像素，並且設計時考慮了移動優先（如從小版本開始設計，以及爲桌面添加「額外的東西」）。對於酷的文章和響應式的東西，我也鼓勵檢查出This is Responsive blog。

3. iPhone設計很特別。不要將它們視爲不同的解決方案。在最薄的狀態下（人像，但即使在風景中也是一樣的狀態），您正在使用320x480（較舊的型號）。上述框架以移動狀態爲目標。使用視網膜的模型基本上可以用同樣的「分辨率」工作，但是每個像素對於您習慣看到的高清晰度都是雙倍的。您的設計主要關注的是視網膜圖像。至於那，this SmashingMag article應該清理一下！

Answer 2

他們很可能瞄準廣闊的桌面，桌面和景觀手機格式參見：http://astronautweb.co/2012/01/responsive-web-design-four-states/

（我肯定希望1024-W IDE的設計實際上並不是1024像素寬。）