《什么是响应式web设计？怎样进行》由会员分享，可在线阅读，更多相关《什么是响应式web设计？怎样进行（17页珍藏版）》请在金锄头文库上搜索。
1、在 Web 设计和开发领域，很快的，我们将会无法跟上设备与分辨率革新的步伐。对 于多数网站来说，为每种新设备及分辨率创建其独立的版本根本就是不切实际的;结果就是， 我们将会赢得使用某些设备的用户群，而失去那些使用其他设备的用户。不过，或许会有 另外一种方式，可以帮助我们避免这种情况的发生。 51CTO 推荐专题：响应式 Web 设计 响应式 Web 设计(Responsive Web design)的理念是，页面的设计与开发应当根据用 户行为以及设备环境( 系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的 实践方式由多方面组成，包括弹性网格和布局、图片、CSS media quer
2、y 的使用等。无论 用户正在使用笔记本还是 iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关 脚本功能等，以适应不同设备; 换句话说，页面应该有能力去自动响应用户的设备环境。这 样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。 响应式 Web 设计的概念 Ethan Marcotte 曾经在 A List Apart 发表过一篇文章“Responsive Web Design“，文中 援引了响应式建筑设计的概念： 最近出现了一门新兴的学科“ 响应式建筑(responsive architecture)“提出，物 理空间应该可以根据存在于其中的人的情况进行响应。结合嵌入
3、式机器人技术以及可拉伸 材料的应用，建筑师们正在尝试建造一种可以根据周围人群的情况进行弯曲、伸缩和扩展 的墙体结构; 还可以使用运动传感器配合气候控制系统，调整室内的温度及环境光。已经有 公司在生产“智能玻璃“ ：当室内人数达到一定的阀值时，这种玻璃可以自动变为不透明， 确保隐私。 将这个思路延伸到 Web 设计的领域，我们就得到了一个全新的概念。为什么一定要 为每个用户群各自打造一套设计和开发方案?和响应式建筑相似，Web 设计同样应该做到 根据不同设备环境自动响应及调整。显然，我们无法也无需使用运动传感器或是机器人技术，响应式 Web 设计更多需要 的是抽象思维。好在，一些相关的概念已经得
4、到了实践，比如液态布局、帮助页面重新格 式化的 media queries 和脚本等。但是响应式 Web 设计不仅仅是关于屏幕分辨率自适应以 及自动缩放的图片等等，它更像是一种对于设计的全新思维模式。 调整分辨率 不同的设备都有各自的屏幕分辨率、清晰度以及屏幕定向方式，不断被研发着的各种 新设备也将带来新的屏幕尺寸规格。有些设备基于横屏(portrait)，有些是竖屏(landscape)， 甚至还有正方形; 对于日益流行的 iPhone、iPad 及其他一些智能手机、平板电脑，用户还 可以通过转动设备来任意切换屏幕的定向方式。怎样才能做到让一种设计方案满足所有情 况? 要想做到同时兼容横、竖
5、屏(用户还有可能在页面加载的过程中切换方向) ，我们就必 须考虑 N 种屏幕尺寸规格。诚然，我们可以将这些规格划分为几个大类，然后为每一类做 一种方案，确保该方案至少在本组中尽量具有弹性。但即使这样，结果也将是无比焦虑的， 谁知道某类设备在5年之后的占有率是多少? 而且很多用户甚至不去将浏览器的窗口最大化; 类似这样的变数，我们还要考虑多少呢?Morten Hjerde 和他的同事们对2005至2008 年市场中的400 余种移动设备进行了统计 (查看报告) ，下图展示了大致的统计结果： 在08年之后，更多更有代表性的新设备问世并普及了。显然，我们不可以沿着“ 多方案 “ 的思路继续走下去;那
6、么我们应该怎样做呢? 部分解决方案：一切弹性化 几年前，弹性布局(flexible layout)几乎是一种奢侈品，所谓弹性，也只是体现在竖排 布局以及字号等方面; 图片始终可以轻易的破坏页面结构，而且即使是哪些弹性的元素结构， 在很极端的情况下，仍会破坏布局。所以，所谓的弹性布局其实并非那样弹性，它有时甚 至不能适应台式机与笔记本的屏幕分辨率差异，更不用说手机等移动设备了。 现在，我们可以通过响应式的设计和开发思路让页面更加“弹性“ 了。图片的尺寸可以 被自动调整，页面布局再不会被破坏。虽然永远没有最完美的解决方案，但它给了我们更 多选择。无论用户切换设备的屏幕定向方式，还是从台式机屏幕转到
7、 iPad 上浏览，页面都 会真正的富有弹性。 在前文提到的 Ethan Marcotte 的文章中，他通过一个实例展示了响应式 Web 设计在 页面弹性方面的特性：该实例的实现方式完美的结合了液态网格和液态图片技术，并且聪明的在正确的地方 使用了正确的 HTML 标记。“ 液态网格“ 是一种很常见的实践方式; 对于“液态图片“技术，下 面的文章做了不错的介绍： Hiding and Revealing Portions of Images （http:/ revealing-portions-of-images/） Creating Sliding Composite Images（http
8、:/ composite-images/） Foreground Images That Scale With the Layout（http:/ images-that-scale-with-the-layout/） 说到创建液态页面，最好看看 Zoe Mickley Gillenwater 的那本Flexible Web Design: Creating Liquid and Elastic Layouts with CSS ，或是下载个样章先：“怎样创建弹性图片 （http:/ 。另外，Zoe 的这篇“Essential Resources for Creating Liquid and
9、 Elastic Layouts. （http:/ resources-for-creating-liquid-and-elastic-layouts/）“ 提供了不少关于创建弹性网格和布局的教程、资源、创意指导和最佳实践方式。 从技术角度讲，虽然听上去这些都简单可行，但它比“ 将这些功能结合在一起“ 要复杂 些。举个例子，仔细观察 Ethan Marcotte 提供的实例中的 logo 图片： 如果我们将浏览器窗口不断调小，会发现 logo 图片的文字部分始终会保持同比缩小， 保证其完整可读，而不会和周围的插图一样被两边裁掉。所以整个 logo 其实包括两部分： 插图作为页面标题的背景图片，
10、会保持尺寸，但会随着布局调整而被裁切;文字部分则是一 张单独的图片。 其中，元素使用插图作为背景，文字部分的图片始终保持与背景的对齐。 这个实例小小的展示一下响应式 Web 设计的思路。不过这点小努力还不足以避免整 个布局在小尺寸窗口中变的过窄或过短，并且 logo 文字最终会变的小到难以识别，背景图 片也会被过多的裁切。弹性图片 响应式 Web 设计的思路中，一个重要的因素是怎样处理图片方面的问题。有很多同 比缩放图片的技术，其中有不少是简单易行的。其中，由 Richard Rutter 最先尝试的一种 做法比较流行，即使用 CSS 的 max-width 属性。这个方法在 Ethan Ma
11、rcotte 的液态图片 一文中也有提到。 img max-width: 100%; 只要没有其他涉及到图片宽度的样式代码覆盖掉这一行规则，页面上所有的图片就会 以其原始宽度进行加载，除非其容器可视部分的宽度小于图片的原始宽度。上面的代码确 保图片最大的宽度不会超过浏览器窗口或是其容器可视部分的宽度，所以当窗口或容器的 可视部分开始变窄时，图片的最大宽度值也会相应的减小，图片本身永远不会容器边缘隐 藏和覆盖。实际上，就像 Jason Grigsby 在他的 CSS Media Query for Mobile is Fools Gold 一文中提到的，“液态图片背后的思路，就是无论何时，都确保
12、在其原始宽度范围内， 以最大的宽度同比完整的显示图片。我们不必在样式表中为图片设置宽度和高度，只需要 让样式表在窗口尺寸发生变化时辅助浏览器对图片进行缩放。“ 一种简而美的方法。 图片本身的分辨率及加载时间是另外一个需要考虑的问题。虽然通过上面的方法，可 以很轻松的缩放图片，确保在移动设备的窗口中可以被完整浏览，但如果原始图片本身过 大，便会显著降低图片文件的下载速度，对存储空间也会造成没有必要的消耗。 响应式图片 由 Filament Group 提出的“响应式图片“技术思想，有助于解决上面提到的问题：不仅 要同比的缩放图片，还要在小设备上降低图片自身的分辨率。可以看下 demo 页面先。这
13、个技术的实现需要使用几个相关文件，我们可以在 Github 上获取。包括一个 JavaScript 文件(rwd-images.js)，一个.htaccess 文件，以及一些范例资源文件。具体使用 方法可以参考 Responsive Images 的说明文档。大致的原理是，rwd-images.js 会检测当 前设备的屏幕分辨率，如果是大屏幕设备，则向页面 head 部分中添加 BASE 标记，并将 后续的图片、脚本和样式表加载请求定向到一个虚拟路径“/rwd-router“。当这些请求到达服 务器端，.htacces 文件会决定这些请求所需要的是原始图片还是小尺寸的“响应式图片“ ， 并进行
14、相应的反馈输出。对于小屏幕的移动设备，原始尺寸的大图片永远不会被用到。 这项技术支持多数的现代浏览器，包括 IE8+ 、Safari 、Chrome 和 Opera，以及这些 浏览器的移动设备版本; 在 FireFox 及一些旧浏览器中，则会优雅降级：我们仍可得到小图 片的输出，但同时，原始大图也会被下载。 禁用 iPhone 中的图片自动缩放 在 iPhone 及 iPod Touch 中，页面会被自动的同比例缩小至最适合屏幕大小的尺寸， x 轴不会产生滚动条，用户可以上下拖拽浏览全部页面，或在需要的时候放大页面的局部。 这里会产生一个问题，即使我们运用响应式 Web 设计的思想，专门为 i
15、Phone 的小屏输出小图片，它同样会随着整个页面一起被同比例缩小，如下图左侧所示。 我们可以使用苹果专有的一些 meta 标记来解决类似的问题。在页面的部分添加以下 代码( 详情可以参考 Think Vitamin 的相关文章) ： 将 initial-scale 的值设定为“1“ ，即可覆写默认的缩放方式，保持原始的尺寸及比例。 更多关于 viewport meta 标记的用法，可以参考苹果官方的文档。 打造布局结构 当页面所需要适应的不同设备的屏幕尺寸差异过大时，除了图片方面，我们也应该考虑到 整个布局结构的响应式调整;我们可以使用独立的样式表，或者更有效的，使用 CSS media query。这不会引起多大的麻烦，多数样式设定不会被影响和改变，只有一些特定的元素会 通过浮动、宽度和高度等的设置来改变位置。 我们可以使用一个默认主样式表来定义页面的主要结构元素，比如 #wrapper、#content、#sidebar、#nav 等的默认布局方式，以及一些全局性的配色和字体方 案。 我们可以监测页面布局随着不同的浏览环境而产生的变化，如果它们变的过窄过短或是过 宽过长，则通过一个子级样式表来继承主样式表的设定，并专门针对某些布局结构进行样 式覆写。我们来看下代码示例： 下面的代码可以放在默认主样式表 style.css 中：
