响应式网页设计断点？为什么设计为1280,1024,640？

Question

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

我的具体问题源自这个项目:

1. 鉴于该项目是一个典型的公司网站,为什么设计师会采用这3种分辨率？
2. 一般来说,这些决议是最佳的还是我应该要求其他人？
   (1024,768,320不会更有意义吗？或者我应该寻找"自然断点而不是规范？"
3. 关于iPhone 3(@ 320px)和4(@ 640px),如何实现640布局？

谢谢你的帮助.

Answer 1

1. 这些似乎是更常见的景观分辨率,1280是桌面的宽版本,1024是普通桌面/陆地景观平板电脑,640是移动版景观.就个人而言,我还没有看到响应式框架的这些确切的解决方案.

2. 我会给你2个很酷的响应框架作为参考.Skeleton运行在3个基本级别:960px +(桌面),768px(平板电脑)和<480px(移动).我认为这些都是非常好的解决方案,特别是如果你不熟悉响应并且仍习惯使用像素.或者,您可以使用Goldilocks方法,该方法使用相同的原理(桌面,平板电脑,移动设备)但使用ems而不是像素,并且设计时首先考虑移动设备(例如,从小版本开始设计,并为桌面添加"额外的东西".对于很酷的文章和响应的东西,我也鼓励查看This is Responsive博客.

3. iPhone设计很特别.不要将它们视为不同的分辨率.在它最薄的状态(肖像,但即使在景观中它是相同的状态),你工作在320x480(旧型号).上述框架以移动状态为目标.视网膜使用模型基本上以相同的"分辨率"工作,但每个像素加倍,以获得您常常看到的高清晰度.您对此设计的主要关注点是视网膜就绪图像.至于那个,这篇SmashingMag文章应该清理一下!