响应式网页设计断点？为什么要为 1280、1024、640 设计？答案

【问题标题】：Responsive web design breakpoints? Why designed for 1280, 1024, 640?响应式网页设计断点？为什么要为 1280、1024、640 设计？
【发布时间】：2012-10-10 15:01:01
【问题描述】：

我在 Photoshop 中收到了三种不同分辨率的网站布局：1280、1024 和 640 像素宽。由于我在 RWD 方面的经验有些有限，我想更好地了解网页设计师应该如何考虑尺寸断点、流动性等（在撰写本文时）。

我在这个项目中提出的具体问题是：

考虑到该项目是一个典型的公司网站，为什么设计师会采用这 3 个解决方案？
一般来说，这些分辨率是最优的还是我应该要求其他分辨率？
（1024、768、320 不是更有意义吗？或者我应该寻找“自然断点而不是规范” ?)
我应该如何考虑在 iPhone 3 (@320px) 和 4 (@640px) 上实现 640 布局？

感谢您的帮助。

【问题讨论】：

标签： html responsive-design media-queries

【解决方案1】：

这些似乎是更常见的横向分辨率，1280 是桌面的宽版本，1024 是普通桌面/横向平板电脑，640 是移动设备的横向。但就我个人而言，我还没有看到响应式框架的这些确切解决方案。
我会给你 2 个很酷的响应式框架作为参考。 Skeleton 运行在 3 个基本级别：960px+（桌面）、768px（平板电脑）和 Goldilocks approach，它使用相同的原理（台式机、平板电脑、移动设备），但使用 ems 而不是像素，并且在设计时考虑到了移动设备优先（例如，您从小版本开始设计，并为桌面添加“额外的东西”）。对于关于响应式的精彩文章和内容，我也鼓励查看This is Responsive blog。
iPhone 的设计很特别。不要将它们视为不同的分辨率。在它最薄的状态下（纵向，但即使在横向上也是相同的状态），您在 320x480（旧型号）下工作。上述框架在其移动状态中针对此。使用 Retina 的模型基本上以相同的“分辨率”工作，但每个像素加倍以获得您习惯看到的高清。您在这里设计的主要关注点是视网膜就绪图像。至于那个，this SmashingMag article 应该澄清一下！

【讨论】：

谢谢布赖恩。好的，那么关于 3）我应该为 320 像素设计并提供更高分辨率的图像？
不要为320“设计”，为“移动”设计。基本上，所有“480px 宽度以下”的东西都应该开始使用单列、100% 宽度样式（这样，如果需要，它甚至可以在 240 处工作）。但是，是的，对于视网膜，您使用另一组分辨率为 2 倍的图像。 Retina.js 可以帮助你一点 - retinajs.com

【解决方案2】：

他们的目标可能是广泛的桌面、桌面和横向手机格式。见：http://astronautweb.co/2012/01/responsive-web-design-four-states/

（我当然希望 1024 宽的设计实际上不是 1024 像素宽。）

【讨论】：