响应式设计—设备宽度解析

http://blog.csdn.net/sql_wtx/article/details/8823272

在做响应设计计划时，要对不同设备的大小有所了解，比如iphone4s是宽480px、长320px; Ipad2是宽1024px、长768px。 下面是翻译一篇文章，对屏幕分辨率做了详细的介绍。本人英语不好，请各位看官多多拍砖、多多提提建议。原文地址:http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning.  文章名:A Simple Device Diagram for Responsive Design Planning

响应设计方案的简单设备图解

在Metal Toad(作者的blog)，我们都是响应设计的大粉丝，但在响应规划过程中，如何选择设备的大小去设计一般是一个困难。刚在昨天，我们还在为网站的最佳设计是3布局还是4布局做了激烈的讨论。我将在后面给出我的意见，每种布局重要的区别在两个方面:一个特殊布局的像素宽度范围是多少;在PSDs上设计者将会建立像素宽度是多少。 设备数量在不断的增加，响应设计要顾及不同的屏幕分辨率，因此我们拼凑了一个简单的图解来列出目前最常用的设备宽度和有可能出现的设备宽度范围。

图解

这就是结果！你也可以去下载PSD格式,并在未来更新新设备或者实验自己的响应设计。

有一些事情需要注意：

• 标签表明，图的顶部和底部都是设备的竖屏取向。我们认为，要创造一个更加直观的高度和宽度的图解，但是在响应设计中我们最关心的是宽度，因此将在同一轴线上表现宽度才是最有意义的。
• iPhone和iPad（这两个设备是最经常作为响应设计的对象）是分别列出320px×480px和768px×1024px。就发展而言， 哪怕 iPhone 4/4S and "the new iPad"的新retina显示屏在水平和垂直方向有2倍多的像素，这仍然是怎样呈现设备的响应布局。

我们建议的布局

3布局

3布局使事情有点棘手，因为我们传统的想法是为了手机竖屏、横屏，平板竖屏和横屏而设计。最简单的方案是适应手 机和平板竖屏的分辨率:

• 0 – 519 像素：在竖屏模式下绝大多数的手机将会是窄屏布局，可以以flild-with布局来自适应屏幕宽度的要求。Iphone横观将仍然看到的是窄屏设计。
• 520 – 959像素:一些新的大屏幕、大分辨率的andriod手机在竖屏模式下将会看到的是居中布局，kindle file、ipad和大多数的平板也是一样。大多数andriod手机在横屏模式下也是这种布局。
• 960+像素:新的大屏手机、kindle fire，ipad和大多数的andriod平板将会看到全宽布局。在桌面上也是这种布局。

设计目标：

• 布局1： 在竖屏模式下，iphone(320×640px)是很适合的。因为往往一个流体宽度布局，就可以增加或减少宽度来适应其他设备
• 布局2：ipad(768×1536px)是这个很好的选择、这种布局可以扩展其它适合这种布局的设备上。
• 布局3：桌面全宽(960PX)，固定宽度的背景非常适合这种布局。

4布局

4种布局被我们应用在Metaltoad.com。虽然那近一年出现了新设备，我们仍然喜欢在我们的网站上使用4布局的方法：

• 0 – 519px：这个和3布局一样，在竖屏模式下绝大多数手机都是窄屏布局。
• 520 – 759px： 这个和3布局不一样了，更加细分了。大分辨率的手机和小分辨率的平板在竖屏方向上将会是这种布局。
• 760 – 959px：ipad和大多数andriod的平板在竖屏时将会是这种布局，或者大多数adnriod手机在横屏下也会是这样的布局。（andriod一般较大）
• 960+px: 这个和3布局一样的，主要是桌边浏览器、ipad的横屏、adnriod平板适合这种布局。

设计目标：

• 布局1：主要是针对iphone的竖屏，和3布局一样。
• 布局2：主要针对是600px的kindle fire。
• 布局3：ipad(768×1536px)是这个很好的选择，这种布局可以扩展其它适合这种布局的设备上。
• 布局4：主要针对桌面了，和3布局一样。

6布局

6布局在预算够多的情况下，可以尝试一下：

注：这个一般我们用不到，有兴趣的看管可以去看原文，我就不翻译了。