4

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

我源于这个项目的具体问题是：

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

谢谢你的帮助。

4

2 回答 2

7

  1. 这些似乎是更常见的横向分辨率，1280 是台式机的宽版本，1024 是普通台式机/横向平板电脑，而 640 是移动设备的横向分辨率。但就个人而言，我还没有看到响应式框架的这些确切解决方案。

  2. 我会给你 2 个很酷的响应式框架作为参考。Skeleton运行在 3 个基本级别：960px+（桌面）、768px（平板电脑）和 <480px（移动）。我认为这些是非常好的解决方案，特别是如果您不熟悉响应式并且仍然习惯于使用像素。或者，您可以使用Goldilocks 方法，该方法使用相同的原则（台式机、平板电脑、移动设备），但使用 em 而不是像素，并且在设计时考虑到了移动优先（例如，您从小版本开始设计，并为桌面添加“额外的东西”）。对于关于响应式的酷文章和内容，我也鼓励查看This is Responsive blog。

  3. iPhone 的设计很特别。不要将它们视为不同的分辨率。在它最薄的状态下（纵向，但即使在横向上也是相同的状态），您在 320x480（旧型号）下工作。上述框架在其移动状态中针对此。使用 Retina 的模型基本上以相同的“分辨率”工作，但每个像素加倍以获得您习惯看到的高清。您在这里设计的主要关注点是视网膜就绪图像。至于那个，这篇 SmashingMag 文章应该把事情弄清楚！

于 2012-10-10T16:04:27.303 回答
0

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

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

于 2012-10-10T15:48:39.373 回答