《什么是响应式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 中: