响应式页面设计如何理解响应式设计

怎么设计响应式WEB

开始第一篇。

老规矩，先无聊的谈论天气一类的话题。

十一长假，天气也终于开始有些秋天的味道，坐在屋里甚至觉得需要热咖啡。

话说两年前也是在国庆假 期里开始做Joomla文档翻译的；长假好时光，总会可以抽出一两天，安静的窝在家里做做博客、学做些新东西，简直没有比这更舒心的事情。

说正事儿。

准备在近期的几篇里集中翻译学习一下"响应式Web设计"的相关话题，包括概念、实践方式、案例及观点讨论等方面。

相比于从前做的文档译 文，这些文章篇幅要长的多(甚至要加分页了！)，今天放上的这篇几乎花掉了两天的"闲暇时间"；对耐力是个考验，努力提高喽。

废话结束，here we go. 眼下，几乎每个新客户都希望他们的网站可以有专门的移动设备版本。

最完美的情况呐，就是为iPhone、iPad、黑莓、Kindle……各自打造 一款——页面分辨率还必须兼容任何设备。

谁知道未来5年内我们还需要为多少新发明的设备设计开发不同版本的页面？这种疯狂什么时候算个头？ 在Web设计和开发领域，很快的，我们将会无法跟上设备与分辨率革新的步伐。

对于多数网站来说，为每种新设备及分辨率创建其独立的版本根本就是不切 实际的；结果就是，我们将会赢得使用某些设备的用户群，而失去那些使用其他设备的用户。

不过，或许会有另外一种方式，可以帮助我们避免这种情况的发生。

响应式Web设计(Responsive Web design)的理念是，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。

具体的实践方式由多方 面组成，包括弹性网格和布局、图片、CSS media query的使用等。

无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说， 页面应该有能力去自动响应用户的设备环境。

这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

响应式Web设计的概念 Ethan Marcotte曾经在A List Apart发表过一篇文章"Responsive Web Design"，文中援引了响应式建筑设计的概念： 最近出现了一门新兴的学科——"响应式建筑(responsive architecture)"——提出，物理空间应该可以根据存在于其中的人的情况进行响应。

结合嵌入式机器人技术以及可拉伸材料的应用，建筑师们正在尝 试建造一种可以根据周围人群的情况进行弯曲、伸缩和扩展的墙体结构；还可以使用运动传感器配合气候控制系统，调整室内的温度及环境光。

已经有公司在生产" 智能玻璃"：当室内人数达到一定的阀值时，这种玻璃可以自动变为不透明，确保隐私。

将这个思路延伸到Web设计的领域，我们就得到了一个全新的概念。

为什么一定要为每个用户群各自打造一套设计和开发方案？和响应式建筑相似，Web设计同样应该做到根据不同设备环境自动响应及调整。

显然，我们无法也无需使用运动传感器或是机器人技术，响应式Web设计更多需要的是抽象思维。

好在，一些相关的概念已经得到了实践，比如液态布局、 帮助页面重新格式化的media queries和脚本等。

但是响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式。

调整分辨率 不同的设备都有各自的屏幕分辨率、清晰度以及屏幕定向方式，不断被研发着的各种新设备也将带来新的屏幕尺寸规格。

有些设备基于横屏 (portrait)，有些是竖屏(landscape)，甚至还有正方形；对于日益流行的iPhone、iPad及其他一些智能手机、平板电脑，用户还 可以通过转动设备来任意切换屏幕的定向方式。

怎样才能做到让一种设计方案满足所有情况？ 要想做到同时兼容横、竖屏(用户还有可能在页面加载的过程中切换方向)，我们就必须考虑N种屏幕尺寸规格。

诚然，我们可以将这些规格划分为几个大 类，然后为每一类做一种方案，确保该方案至少在本组中尽量具有弹性。

但即使这样，结果也将是无比焦虑的，谁知道某类设备在5年之后的占有率是多少？而且很 多用户甚至不去将浏览器的窗口最大化；类似这样的变数，我们还要考虑多少呢？ Morten Hjerde和他的同事们对2005至2008年市场中的400余种移动设备进行了统计(查看报告)，下图展示了大致的统计结果： 在08年之后，更多更有代表性的新设备问世并普及了。

显然，我们不可以沿着"多方案"的思路继续走下去；那么我们应该怎样做呢？

响应式网页设计的趋势

响应式设计在2012年被提的比较多，但是响应式设计仍然在不断变化，不断创新。

比如，新的设备不断出来(iPad Mini)，这让以前的设计想法土崩瓦解。

而各种Web的响应式设计也获得了越来越多的注意，“让人们忘记设备尺寸”的理念将更快地驱动响应式设计，所以Web设计也将迎来更多的响应式设计元素。

对移动开发者尤其有用的工具，其前身是 Adobe Shadow，用于帮助设计师和开发者同时在多个移动设备上预览应用设计，发现和解决跨平台问题。

Responsive Web Design Sketch Sheets 如果你还在用纸和笔来创建你的实体模型，你可以用这些现有的草图来设计你的交互网站了。

这个工具可以让你预览你设计网页在不同设备上的效果，只需要访问它的网站并输入你网站的地址就可以看到了。

做响应式web 页面怎么设计

响应式Web设计的方法 介绍完响应式Web的背景和概念之后，是时候该介绍具体的实现方法了，其实响应式Web设计的方法很简单，就是利用CSS3的媒体查询Media Queries和Viewport来解决问题的。

首先我们一起来看看Media Queries，这里我只会对其做一个简单的列举介绍。

通过媒体查询的设置，我们可以根据屏幕宽度e69da5e6ba90e799bee5baa631333335313737、屏幕方向等各个属性来加载不同场景下不同的CSS文件来渲染页面的视觉风格。

具体的使用方法有以下两种： 1、通过link标签： <link rel="stylesheet" type="text/css" media="screen and (max-width: 479px)" href="testcssbywidth1.css" /> 示例代码代表当当前屏幕宽度小于479px的时候，加载testcssbywidth1.css文件来渲染页面。

2、CSS中直接设置： @media screen and (max-width:479px) { 　　/* 具体的CSS属性设置 */ 　　} 对于Media Queries的一些常用属性，只对常用的几个做一个简单列举说明，其他的属性请各位自行查阅相关资料： width：描述终端设备显示区域的宽度，接受max/min的前缀； height：描述终端设备显示区域的高度，接受max/min的前缀； device-width：描述终端设备屏幕的宽度，接受max/min的前缀； device-height：描述终端设备屏幕的高度，接受max/min的前缀； orientation：描述终端设备处于横屏还是竖屏的状态，取值分别为：landscape/portrait。

当我们调整浏览器大小的时候，上面通过媒体查询属性的操作就可以完成响应式Web设计的工作，但是这却不能满足移动终端的浏览器，因为移动浏览器默认页面是为宽屏幕设计的，所以会把他缩小来适应小屏幕，但是终端设备却无法识别正确的宽度，所以光靠媒体查询是解决不了移动终端设备的响应式Web设计的

响应式网页设计的十大开发框架

Gumby Framework Gumby 2是建立在Sass基础上的。

Sass是一款非常强大的CSS 预处理器，允许用户自主快速的开发扩展Gumby，同时提供很多新的工具来自定义和扩展Gumby框架。

Gumby 2是一个非常棒的响应式CSS框架。

Get UI Kit Get UI Kit是一款轻量级、模块化的前端框架，可快速构建强大的web前端界面，而且，它是一款开源的前端UI界面的框架，可以无任何限制的使用UIKit 来创建自己的风格。

Foundation Foundation是一个易用、强大而且灵活的框架，用于构建基于任何设备上的Web应用。

提供多种Web上的UI 组件，如表单、按钮、 标签等。

Semantic UI是Web的灵魂！Semantic是为工程师而制作的可复用的开源前端框架。

提供各种UI组件，使得开发更加直观、易于理解。

52Framework 52 Framework主要用于优化HTML5和CSS3的跨浏览器兼容性的框架，可在所有主流浏览器上运行。

PureCSS Pure是一组小的、响应式CSS模块，可用于任意Web项目中。

它可作为每个网站或Web应用的起步工具，帮助开发者处理应用程序所需的所有CSS工作，同时不会让每个应用千篇一律。

Responsablecss Responsable使用最少的Sass，带给你最完美的响应式框架。

TukTuk TukTuk支持代码重用功能，提供更加快速、高效的样式列表，易于添加与维护。

Kube Kube是全球最为流行、最灵活的CSS框架之一。

其带给你最强大的功能选择，极具创意性与美观性。

Ivory Ivory是一款强大、灵活、易用的响应式框架。

Ivory基于12列的响应式网格布局，包含表格，按钮，表格，分页，拨动开关，工具提示，手风琴，选项卡等网站中常用的组件和样式。

什么是响应式布局，响应式布局该如何设计

响应式布局就是根据你的屏幕大小，内容自己布局。

比如你用PC端访问，平板访问，手机访问，效果不一样。

刚做了个项目 就是响应式布局。

挺简单的 至于设计，看看 bootstrap吧。

文档很全。

感觉挺简单的

如何理解响应式设计

在设计中经常遇到这几个问题： 1.想要网站兼容手机、平板电脑、pc，就得为不同的设备定制不同的版本。

2.想要网站的某些页面在宽屏显示器下一行显示更多的内容，又得为宽屏定制一个版本。

3.很多人并不是在全屏的情况下浏览我们的页面，如果让页面随着浏览器宽度改变而相应的调整会不会比较好？ 有没有办法能有效解决这些问题呢？ 响应式Web设计(Responsive Web design)的理念是页面的设计与开发应当根据设备环境（屏幕尺寸、屏幕定向、系统平台等）以及用户行为（改变窗口大小等）进行相应的响应和调整。

具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。

无论用户正在使用pc、平板电脑，或者手机，无论是全屏显示还是非全屏的情况，无论屏幕是横向还是竖向，页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备。

响应式web设计对交互设计和前端实现提出了更高的要求，需要考虑清楚不同分辨率下页面的布局变化、内容的缩放等。

响应式Web设计的优势： 1、开发、维护、运营成本优势：页面只有一个，只是针对不同的分辨率、不同的设备环境进行了一些不同的设计，所以在开发、维护和运营上，相对多个版本，能节约成本。

2、兼容性优势：移动设备新的尺寸层出不穷，定制的版本通常只适用于某些规格的设备，如果新的设备分辨率变化较大，则往往不能兼容，而开发新的版本需要时间，这段时间内的访问就是个问题，但是响应式Web设计可以提前预防这个问题。

3、操作灵活：响应式设计是针对页面的，可以只对必要的页面进行改动，其他页面不受影响。

当浏览器宽度变小时，左右两栏的宽度都有缩小，左边的banner图片和视频也相应缩小，右边的头像列表由一排4个变为一排两个。

当浏览器宽度进一步变小后，页面由两栏结构变为一栏结构，部分内容的尺寸进一步缩小，搜索区域也从导航里挪到了导航外。

响应式页面的设计流程： 第一步：确定需要兼容的设备类型、屏幕尺寸 通过用户研究，了解用户使用的设备分布情况，确定需要兼容的设备类型、屏幕尺寸。

设备类型：包括移动设备（手机、平板）和pc。

对于移动设备，设计和实现的时候注意增加手势的功能。

屏幕尺寸：包括各种手机屏幕的尺寸（包括横向和竖向）、各种平板的尺寸（包括横向和竖向）、普通电脑屏幕和宽屏。